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

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

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

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

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

zvokhttg

zvokhttg1#

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

const lightGridLineColor = 'black';
const darkGridLineColor = 'yellow'

const myBarChart = new Chart(ctx, config);

document.getElementById('chartChange').addEventListener('click', () => {
  const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;
  if (toDarkMode) {
    myBarChart.options.scales.x.grid.color = darkGridLineColor;
    myBarChart.options.scales.y.grid.color = darkGridLineColor
  } else {
    myBarChart.options.scales.x.grid.color = lightGridLineColor;
    myBarChart.options.scales.y.grid.color = lightGridLineColor
  }

  myBarChart.update();
})

活样品:
第一个

相关问题