如何在图表中添加实心圆点

Question

我正在用 rechart 绘制 lineChart，当存在虚线时，该图表的点也变成破折号，但我想要完整的圆而不是虚线圆，该怎么做？

这是我用过的代码

<LineChart width={600} height={300} data={data}
        margin={{top: 20, right: 30, left: 20, bottom: 10}}>
   <CartesianGrid strokeDasharray="3 3"/>
   <XAxis dataKey="name" height={60} />
   <YAxis/>
   <Tooltip/>
   <Legend />
   <Line type="monotone"  dataKey="pv" stroke="#8884d8" label={<CustomizedLabel />}/>
   <Line type="monotone"  strokeDasharray="3 3" dataKey="uv" stroke="red" />
  </LineChart>

并输出：

我希望红点是全圆而不是虚线圆，只有线应该是虚线，请有人帮忙

谢谢

Answer 1

您可以使用Line组件内的活动点属性来自定义和渲染自定义点，以下是示例：

   <Line type="monotone"  strokeDasharray="3 3" dataKey="uv" stroke="red" 
   dot={{ stroke: 'red', strokeWidth: 1, r: 4,strokeDasharray:''}}
   />

这是 recharts 官方文档中自定义点的另一个示例： https: //recharts.org/en-US/examples/CustomizedDotLineChart

这是您的代码的改编： https ://jsfiddle.net/ys6zwjaL/#&togetherjs=0jVcg5yr0N