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

Question

我正在使用 recharts与 react ，我需要关于如何在同一个 Line 中使用不同笔画的建议在 LineChart .例如，它可以显示一条直到当前日期的实线，以及一条表示 future 日期的虚线(可以认为是对某些数据的预测)。

Answer 1

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

我构造了如下所示的数据，所以当我们不需要预测或电流的线时，只需在 data[2] 的交点处使用 null 和预测和当前是相同的变量。

    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 组件为当前、历史和预测绘制线条，其中一个用于具有 Prop 的预测 strokeDasharray="3 3"为虚线。

这是 fiddle 的链接: https://jsfiddle.net/jassMarok/q6gLxoz4/

// JS Source Only
const {LineChart, Area, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ComposedChart} = Recharts;
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}
];
const SimpleLineChart = React.createClass({
	render () {
  	return (
    	<ComposedChart width={600} height={300} data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="month" />
       <YAxis />
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <ReferenceLine y={15} label="Target Seats" stroke="red" />
       <Area type="monotone" dataKey="current" fill="#8884d8" stroke="#8884d8" />
       <Line type="monotone" dataKey="historical" stroke="#82ca9d" />
       <Line type="monotone" dataKey="prediction" stroke="#8884d8" strokeDasharray="3 3" />
      </ComposedChart>
    );
  }
})