交互反应-图表-2彩色背景列

Question

我在一个项目中使用了react chartjs-2，并且我仍然试图找到一个解决方案，如何用下面图像的相同逻辑均匀地为所有列着色。

​

我发现chartjs有插件->注释来实现这一点，但它似乎不起作用。

这是我的密码箱的链接。我想要做的是，不管它接收到的x轴和y轴(日期、数字、字符串)的数据如何，用图形当前的设置对列进行交替着色。我见过一些人建议在图表中使用插件->注释，但尝试不起作用。如果你能帮我，请告诉我，谢谢！

codesandbox.io/s/adoring-bohr-y59hm5?file=/src/CustomChart.js

Answer 1

为此，最好的方法是将数据放入单独的数组中。

const data = [{x: "2007-01-03",y: 0.0},{x: "2007-02-18",y: -1.3},{x: "2007-08-21",y: -0.2}]

然后在数据和组件中使用array.prototype.map函数，然后使用

<Bar
  data={{
    labels:data.map(item=>item.x),
    dataset:[{
      data:data.map(item=>item.y),
      backgroundColor:data.map((item,index)=>index%2 === 0 ? 'red':'pink')
      ...otherOptionsOrStyles
     }] 
  }}
/>

希望这能帮上忙