尝试在图表中创建垂直线

问题描述

所以我有一个用图表创建的图形，我想在其中创建一条垂直线，并用红色标记它。我尝试使用ReferenceLine，但它实际上没有工作。我的代码看起来像这样：

const FEATURES = [{
    name: "y1",color: "orange"
},{
    name: "y2",color: "red"
},{
    name: "y3",color: "green"
},{
    name: "y4",color: "blue"
},{
    name: "y5",color: "pink"
},{
    name: "y6",color: "black"
}
]

const createLines = () => {
    let lines = []
    FEATURES.forEach((feature) => {
        lines.push(<Line strokeWidth={2} dot={false} animationDuration={500} isAnimationActive={true} animationEasing="linear" type="linear" yAxisId={feature.name} dataKey={feature.name} stroke={feature.color} />)
    })
    return lines
}

const createYAxis = () => {
    let yAxis = []
    FEATURES.forEach((feature,index) => {
        yAxis.push(<YAxis yAxisId={feature.name} orientation={(index % 2 == 0) ? "right" : "left"} tick={{ stroke: feature.color }} dataKey={feature.name}></YAxis>)
    })
    return yAxis
}

const AnalysisChart = (props) => {
{/*markupDate is the value in the x axis I want to make the line itself,more specifically 14.10.18 20:16:00*/}
    const markupDate = moment.utc(props.chosenAnalysisDateTime).format("DD.MM.YY HH:mm:SS")
    return (
        <div className="analysisShadowContainer">
            <div className="analysisContainer">
                <div className="header">
                    <span className="exit-button" onClick={() => props.setIsAnalysisOpen(false)}>X</span>
                </div>
                <LineChart width={1200} height={300} data={props.analysisData}>
                    {createLines()}
                    <Cartesiangrid stroke="#ccc" />
                    <Tooltip />
                    <Legend verticalAlign="top" height={36} />
                    <XAxis alwaysShow={true} scale="auto" dataKey="datetime" tickFormatter={(datetime) => moment(datetime).format("DD.MM.YY HH:mm:SS")} />
                    <ReferenceLine strokeDasharray="3 3" yAxisId={"y6"} x={markupDate} stroke="red" label="Min PAGE" />
                    {createYAxis()}
                </LineChart>
            </div>
        </div>
    )
}

我在网上四处寻找一些解决方案，但找不到真正有用的东西。 我试着玩了ReferenceLine的道具，遇到了一个问题，即“无法在参考线中读取未定义的“ scale””，添加了一个“ yAxisId”道具，这是我在网上阅读的，但并没有真正成功使一条垂直线实际出现在图形中： Current graph with where I want the vertical line

也许还有另一种添加垂直线的方法吗？

解决方法

ReferenceLine正是您在图表中显示图形中垂直线所需的组件。

要为x设置ReferenceLine的值，文档指出道具x必须是数字或字符串。并且在您的代码中，您给出的是moment.utc(...)的结果，但两者都不是。尝试将结果转换为字符串（例如markupDate.toString（）），以获得更好的结果。