reactjs - rechart如何添加实心圆点

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官方文档中自定义dot的例子: https://recharts.org/en-US/examples/CustomizedDotLineChart

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