如何在图表中的同一行显示不同的笔画？

Question

我正在使用rechartswith react，我需要关于如何在Linea 中使用不同笔划的建议LineChart。例如，它可以显示当前日期之前的实线，以及未来日期的虚线（视为某些数据的预测）。

Answer 1

我遇到了与@fjcero 相同的问题，我也遇到了同样的问题。但由于链接不再有效，因此创建了一个新的小提琴。

我构造的数据如下所示，因此当我们不需要预测线或当前线时，只需使用空值，并且在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}
];

然后使用三个 Line 组件来绘制当前、历史和预测的线，其中一个用于预测的线具有strokeDasharray="3 3" 虚线的支柱。

这是小提琴的链接：https ://jsfiddle.net/jassMarok/q6gLxoz4/

    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}
];

Answer 2

我解决了生成两条不同线的问题，数据集基于空值和交集值。这是一个例子：

<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>

https://jsfiddle.net/alidingling/exh283uh/