Question

问题

我有一个Laravel网站，其中包含多个图表和一个“夜间模式”按钮。此按钮使页面变暗，文本变浅。

函数如下：

   function darkMode(){
    var element = document.getElementsByClassName("day")[0];
    element.classList.toggle("night");

    if(Chart.defaults.global.defaultFontColor == 'black'){
        Chart.defaults.global.defaultFontColor = 'white'

    } else {
        Chart.defaults.global.defaultFontColor = 'black'
    }
}

此功能除以下问题外均可正常运行：按下按钮时，只有当光标悬停在图表上时，才会显示新的字体颜色。

已采取的步骤

在夜间模式功能用 chart.update（）

但是我得到错误说明：

chart.update不是函数。

选择特定的图表不是一种选择，因为我想使用此功能在具有多个图表的多个页面上工作。
也不希望重新加载整个网页以进行更改。

目标

要在按下“夜间模式”按钮时使图表文本更改颜色，并且用户不必先将鼠标悬停在图表上即可进行更改。

其他信息

Chart.js版本2.9.3（使用brew / npm安装）
在Safari和Chrome上都经过测试

有什么提示吗？

Answer 1

var barChartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Dataset 1',
				backgroundColor: [
					window.chartColors.red,
					window.chartColors.orange,
					window.chartColors.yellow,
					window.chartColors.green,
					window.chartColors.blue,
					window.chartColors.purple,
					window.chartColors.red
				],
				yAxisID: 'y-axis-1',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}, {
				label: 'Dataset 2',
				backgroundColor: window.chartColors.grey,
				yAxisID: 'y-axis-2',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}]

		};
		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					responsive: true,
					title: {
						display: true,
						text: 'Chart.js Bar Chart - Multi Axis'
					},
					tooltips: {
						mode: 'index',
						intersect: true
					},
					scales: {
						yAxes: [{
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'left',
							id: 'y-axis-1',
						}, {
							type: 'linear', // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
							display: true,
							position: 'right',
							id: 'y-axis-2',
							gridLines: {
								drawOnChartArea: false
							}
						}],
					}
				}
			});
		};

		document.getElementById('changeColor').addEventListener('click', function() {
			Chart.defaults.global.defaultFontColor = "#ff0000"
			window.myBar.update();
		});

<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
<div style="width: 75%">
		<canvas id="canvas"></canvas>
	</div>
	<button id="changeColor">Change To Red Color</button>

希望这会有所帮助。

Chart.js仅在悬停时显示字体更改

1 个答案: