如何在Chart.Js中,通过按下按钮(或任何元素)来改变颜色?

c9qzyr3d  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(214)

当我切换到深色模式时,我如何改变我使用的图表在浅色模式下的线条颜色?2你能帮我吗?
以下是我现在使用的颜色:

这就是我在切换到暗模式时需要更改颜色的方式:

我的chartjs图表可在下面的codepen链接中获得:https://codepen.io/korayhan-aslan/pen/QWQeMej
第一个

zvokhttg

zvokhttg1#

您可以直接进入图表对象内部,进入选项并更改网格线的颜色:

  1. const lightGridLineColor = 'black';
  2. const darkGridLineColor = 'yellow'
  3. const myBarChart = new Chart(ctx, config);
  4. document.getElementById('chartChange').addEventListener('click', () => {
  5. const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;
  6. if (toDarkMode) {
  7. myBarChart.options.scales.x.grid.color = darkGridLineColor;
  8. myBarChart.options.scales.y.grid.color = darkGridLineColor
  9. } else {
  10. myBarChart.options.scales.x.grid.color = lightGridLineColor;
  11. myBarChart.options.scales.y.grid.color = lightGridLineColor
  12. }
  13. myBarChart.update();
  14. })

活样品:
第一个

展开查看全部

相关问题