如何在 Chart.Js 中，通过按下按钮（或任何元素）来更改颜色？

Question

当我切换到深色模式时，如何更改我使用的 ChartJS 的浅色模式下的线条颜色？你能帮我解决这个问题吗？

\n

以下是我现在使用的颜色：\n

\n

这就是我切换到深色模式时需要更改颜色的方式：\n

\n

我的 ChartJS 图表可在下面的 Codepen 链接中找到：\n https://codepen.io/korayhan-aslan/pen/QWQeMej

\n

\r\n

\r\n

// bar chart start\n        var chartData = {\n         labels: [\'Ocak\', \'\xc5\x9eubat\',\'Mart\', \'Nisan\', \'May\xc4\xb1s\', \'Haziran\', \'Temmuz\', \'A\xc4\x9fustos\', \'Eyl\xc3\xbcl\', \'Ekim\', \'Kas\xc4\xb1m\', \'Aral\xc4\xb1k\'],\n         datasets: [{\n            label: "Yat\xc4\xb1r\xc4\xb1mlar",\n            backgroundColor: "#1355FF",\n            borderWidth: 0,\n            borderRadius: 5,\n            data: [20423,40123,60313,80412,40414,1932,40131,10124,30578,50421,60124,14512]\n            }, {\n            label: "\xc3\x87ekimler",\n            backgroundColor: "#57D3DD",\n            borderRadius: 5,\n            borderWidth: 0,\n            data: [60732,30125,20712,50252,30689,50234,20464,30123,10245,15123,40126,60126]\n            },\n         \n            ]\n        };\n         \n        let value = 80000;\n        var ctx = document.getElementById(\'barChart\');\n        var myBarChart = new Chart(ctx, {\n             \n            type: "bar",\n            data: chartData,\n            drawBorder:false,\n            options: {\n                responsive:true,\n                maintainAspectRatio: false,\n                scales: {\n                    x: {\n                        title: {\n                            display: false\n                        },\n                        grid: {\n                            display:false\n                        },\n                        ticks: {\n                            color: "#718096"\n                        }\n                    },\n                    y: {\n                        title: {\n                            display: false\n                        },\n                        min: 0,\n                        max: 80000,\n                        ticks: {\n                            stepSize: 20000,\n                            color: "#718096",\n                            callback: function(value, index, values) {\n                                return value * 0.001 + " K";\n                            }\n                        },\n                        grid: {\n                            color: \'#EDF2F7\'\n                        }\n                    }\n                },\n                plugins: {\n                    legend: {\n                        position:"top",\n                        labels: {\n                            font: {\n                                size: 12,\n                                weight: 500\n                            },\n                            color: "#2D3748",\n                            boxWidth: 8,\n                            boxHeight:8,\n                            usePointStyle: true,\n                            pointStyle: "circle"\n                        }\n                    }\n                }\n            }\n        });\n        \n        // bar chart end

\r\n

.container {\n  max-width:1200px;\n  width:100%;\n  margin:0 auto;\n}

\r\n

<div class="container">\n  <canvas id="barChart" width="400" height="240"></canvas>\n  </div>\n<input type="checkbox" name="chartChange" id="chartChange">\n<label for="chartChange">Click to change chart color text</label>\n\n<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

\r\n

\r\n

\r\n

\n

Answer 1

您只需进入图表对象内部的选项并更改网格线的颜色：

\n

const lightGridLineColor = \'black\';\nconst darkGridLineColor = \'yellow\'\n\nconst myBarChart = new Chart(ctx, config);\n\ndocument.getElementById(\'chartChange\').addEventListener(\'click\', () => {\n  const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;\n  if (toDarkMode) {\n    myBarChart.options.scales.x.grid.color = darkGridLineColor;\n    myBarChart.options.scales.y.grid.color = darkGridLineColor\n  } else {\n    myBarChart.options.scales.x.grid.color = lightGridLineColor;\n    myBarChart.options.scales.y.grid.color = lightGridLineColor\n  }\n\n  myBarChart.update();\n})\n

\n

现场样本：

\n

\r\n

\r\n

const lightGridLineColor = \'black\';\nconst darkGridLineColor = \'yellow\'\n\n// bar chart start\nconst chartData = {\n  labels: [\'Ocak\', \'\xc5\x9eubat\', \'Mart\', \'Nisan\', \'May\xc4\xb1s\', \'Haziran\', \'Temmuz\', \'A\xc4\x9fustos\', \'Eyl\xc3\xbcl\', \'Ekim\', \'Kas\xc4\xb1m\', \'Aral\xc4\xb1k\'],\n  datasets: [{\n      label: "Yat\xc4\xb1r\xc4\xb1mlar",\n      backgroundColor: "#1355FF",\n      borderWidth: 0,\n      borderRadius: 5,\n      data: [20423, 40123, 60313, 80412, 40414, 1932, 40131, 10124, 30578, 50421, 60124, 14512]\n    }, {\n      label: "\xc3\x87ekimler",\n      backgroundColor: "#57D3DD",\n      borderRadius: 5,\n      borderWidth: 0,\n      data: [60732, 30125, 20712, 50252, 30689, 50234, 20464, 30123, 10245, 15123, 40126, 60126]\n    },\n\n  ]\n};\n\nlet value = 80000;\nconst ctx = document.getElementById(\'barChart\');\nconst myBarChart = new Chart(ctx, {\n\n  type: "bar",\n  data: chartData,\n  drawBorder: false,\n  options: {\n    responsive: true,\n    maintainAspectRatio: false,\n    scales: {\n      x: {\n        title: {\n          display: false\n        },\n        grid: {\n          display: false\n        },\n        ticks: {\n          color: "#718096"\n        }\n      },\n      y: {\n        title: {\n          display: false\n        },\n        min: 0,\n        max: 80000,\n        ticks: {\n          stepSize: 20000,\n          color: "#718096",\n          callback: function(value, index, values) {\n            return value * 0.001 + " K";\n          }\n        },\n        grid: {\n          color: \'#EDF2F7\'\n        }\n      }\n    },\n    plugins: {\n      legend: {\n        position: "top",\n        labels: {\n          font: {\n            size: 12,\n            weight: 500\n          },\n          color: "#2D3748",\n          boxWidth: 8,\n          boxHeight: 8,\n          usePointStyle: true,\n          pointStyle: "circle"\n        }\n      }\n    }\n  }\n});\n\ndocument.getElementById(\'chartChange\').addEventListener(\'click\', () => {\n  const toDarkMode = myBarChart.options.scales.x.grid.color === lightGridLineColor;\n  if (toDarkMode) {\n    myBarChart.options.scales.x.grid.color = darkGridLineColor;\n    myBarChart.options.scales.y.grid.color = darkGridLineColor;\n  } else {\n    myBarChart.options.scales.x.grid.color = lightGridLineColor;\n    myBarChart.options.scales.y.grid.color = lightGridLineColor;\n  }\n\n  myBarChart.update();\n});\n\n// bar chart end

\r\n

.container {\n  max-width: 1200px;\n  width: 100%;\n  margin: 0 auto;\n}

\r\n

<div class="container">\n  <canvas id="barChart" width="400" height="240"></canvas>\n</div>\n<input type="checkbox" name="chartChange" id="chartChange">\n<label for="chartChange">Click to change chart color text</label>\n\n<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

\r\n

\r\n

\r\n

\n