Reactjs 如何在rechart中显示同一行中的不同笔划？

我正在将

recharts

与

react

一起使用，我需要关于如何在

折线图中的同一
行中使用不同笔划的建议。例如，它可以显示当前日期之前的实线，以及未来日期的虚线（可以认为是对某些数据的预测）。
我处理了生成两条不同线的问题，数据集基于空值和交集值。以下是一个例子：

<LineChart
  width={600}
  height={300}
  data={history}
  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
  <Line type="monotone" dataKey="volume" stroke="#82ca9d" dot={false} />
  <Line
    type="monotone"
    dataKey="volumef"
    strokeDasharray="5 5"
    stroke="red"
    dot={false}
  />
</LineChart>



我和@fjcero一样处理这个问题，我也在为同样的问题而挣扎。但由于这种联系不再起作用，它创造了一种新的局面

我像下面这样构造了数据，所以当我们不需要预测线或当前线时，只需使用null，在
Data[2]
的交点处，预测和当前是相同的变量

    const data = [
      {month: "Feb", historical:4, current: 5, prediction:null},
      {month: "Mar", historical:11, current: 10.5, prediction:null},
      {month: "April", historical:12, current: 11, prediction:11},
      {month:"June", historical:13, current:null, prediction:13},
      {month:"July", historical:14, current:null, prediction:15},
      {month:"August", historical:15, current:null, prediction:17}
];

然后，使用三个线组件为当前、历史和预测绘制线，其中一个用于预测，虚线的属性为strokeDasharray=“3 3”

以下是fiddle的链接：


//仅限JS源代码
const{LineChart，Area，Line，XAxis，YAxis，CartesianGrid，工具提示，图例，ReferenceLine，ComposedChart}=Recharts；
常数数据=[
{月份：“二月”，历史：4，当前：5，预测：空}，
{月份：“三月”，历史：11，当前：10.5，预测：空}，
{月份：“四月”，历史：12，当前：11，预测：11}，
{月份：“六月”，历史：13，当前：空，预测：13}，
{月份：“7月”，历史：14，当前：空，预测：15}，
{月份：“8月”，历史：15，当前：空，预测：17}
];
const SimpleLineChart=React.createClass({
渲染（）{
返回(
);
}
})
那么您的意思是希望通过编程方式访问线中的特定点？嗯，实际上是基于X轴（或者可能是Y轴）值。如果该行超过该限制，它将变为dashedDect，但无论如何都必须更改
组件中的prop
strokeDasharray
。所以我想这只是一个如何从那里访问某个数据点的问题，对吗？是的，我认为soThing是
strokeDasharray
是指完整的
行
，我看不到一种方法可以将其数据点更改为一行。我认为如果您在这里共享代码而不是JSFIDLE会更好，因为我们无法控制JSFIDLE的可用性。@Pankwood只添加了源代码，但不会在stackoverflow上运行，这样会更好吗？是的。链接和代码在一起看起来很神奇。Tks