Chart.js-如何在x轴和y轴之间创建不同的全局配置

Question

我使用Chart.js(https://www.chartjs.org/)在我的网站的几个页面上显示不同的图表

为了简化这些图表的添加和修改，我在脚本中添加了一些行，以不同于基本选项来配置Chart.js

Chart.defaults.scale.gridLines.display =  true
Chart.defaults.scale.gridLines.drawBorder =  true
Chart.defaults.scale.gridLines.color =  '#f5f5f5'
Chart.defaults.global.legend.display = true;
Chart.defaults.global.legend.labels.fontSize = 13
Chart.defaults.global.legend.labels.fontColor = '#373d3f'
....

问题是，在某些选项上，我希望x和y轴的值不同，例如drawOnChartArea选项

我不知道该怎么做，因为它不起作用：

Chart.defaults.scale.xAxes.gridLines.drawOnChartArea = false
Chart.defaults.scale.yAxes.gridLines.drawOnChartArea = true

所以，我仍然被迫在我所有图形的选项中添加这些行：

options: {
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false,
}
}],
yAxes: [{
gridLines: {
drawOnChartArea: true,
}   
}],
},
}

如何在x轴和y轴之间创建不同的全局配置

有没有其他方法可以为Chart.js创建全局配置(更干净？更高效？(？

Answer 1

Chart.defaults包含图表type特定的部分，其中包括scales选项。您可以使用console.log(Chart.defaults)来了解它的外观。

例如，Chart.defaults.bar定义如下：

"bar": {
"hover": {
"mode": "label"
},
"scales": {
"xAxes": [{
"type": "category",
"offset": true,
"gridLines": {
"offsetGridLines": true
}
}],
"yAxes": [{
"type": "linear"
}]
}
}

如果嵌套特性的父对象已经定义，则可以直接指定其值。

Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;

但是，如果父对象尚未定义，则需要将特性与其父对象或对象层次一起指定。执行此操作时，请确保还接管以前存在的默认值。

Chart.defaults.bar.legend = { display: false };

请看下面的代码示例。

Chart.defaults.bar.legend = {
display: false
};
Chart.defaults.bar.scales.xAxes[0].gridLines.drawOnChartArea = false;
Chart.defaults.bar.scales.yAxes[0] = {
type: 'linear',
gridLines: {
drawOnChartArea: false
},
ticks: {
beginAtZero: true
}
};
new Chart(document.getElementById("myChart"), {
type: 'bar',
data: {
labels: ["A", "B", "C", "D"],
datasets: [{
data: [25, 18, 8, 13],
backgroundColor: ['red', 'blue', 'green', 'orange']
}]
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" height="90"></canvas>