根据文档,Chartjs (v4) 网格样式是使用
options.scales[scaleId].grid
命名空间控制的。我可以使用以下语句来全局控制选择元素的样式:
Chart.defaults.scale.grid.display = true;
Chart.defaults.scale.grid.lineWidth = 5;
但是,我似乎找不到使用上述命名空间的
[scaleId]
部分控制各个轴默认值的语法。我尝试了以下方法,但没有成功:
Chart.defaults.scales.x.grid.display = true;
Chart.defaults.scales['x'].grid.display = true;
单独设置轴默认值的正确语法是什么?
TLDR;我在一个单独的文件中设置全局显示属性,并将这些设置导入到 Vue 3 项目中的每个图表(我有 20 多个图表)中。
// Set project defaults
import Chart from "chart.js/auto"
// general
Chart.defaults.responsive = true;
Chart.defaults.maintainAspectRatio = false;
// animations
Chart.defaults.animation.duration = 2000;
Chart.defaults.animation.easing = 'easeInOutQuart';
...
我已经检查了
Chart.defaults
对象,但我没有看到默认对象中对各个轴的引用。
更新:我找到了我的 IDE 可以接受的结构,但它似乎不会影响图表。
Chart.defaults.scales.linear.axis.x = {
grid: {
borderColor: '#FF0000',
display: true,
}
};
x
、y
或 r
角色之间的轴定义没有区别。您可以通过 type
设置默认值,即 linear
、category
、time
等
大多数绘图类型的默认状态是
x
轴的类型为 "category"
且 y
轴的类型为 "linear"
。如果您的所有图表都是这种情况,那么您可以使用它来设置默认值:
if(!Chart.defaults.scales.linear.border){
Chart.defaults.scales.linear.border = {};
}
Chart.defaults.scales.linear.border.color = 'blue'; // y-axis
if(!Chart.defaults.scales.category.border){
Chart.defaults.scales.category.border = {};
}
Chart.defaults.scales.category.border.color = 'red'; // x-axis
但是,如果您要使用与默认不同的轴类型,例如对
x
和 y
使用线性轴,您可以使用以下事实:您需要的选项是 scriptable,
因此,您可以通过 .axis
属性将它们的默认值设置为在运行时询问比例角色的函数(其值可能是 x
、y
或 r
):
if(!Chart.defaults.scales.linear.border){
Chart.defaults.scales.linear.border = {};
}
Chart.defaults.scales.linear.border.color = function({scale}){
if(scale.axis === 'x'){
return 'red'
}
if(scale.axis === 'y'){
return 'blue'
}
};
这是一个更详细的示例:
for(axisType of ['linear', 'category']){
Chart.defaults.scales[axisType].border = Chart.defaults.scales[axisType].border ?? {};
Chart.defaults.scales[axisType].border.color = function({scale}){
if(scale.axis === 'x'){
return 'red'
}
if(scale.axis === 'y'){
return 'blue'
}
}
Chart.defaults.scales[axisType].grid = Chart.defaults.scales[axisType].grid ?? {};
Chart.defaults.scales[axisType].grid.color = 'rgba(0,0,0,0.3)'
Chart.defaults.scales[axisType].grid.display = function({scale}){
if(scale.axis === 'x'){
return true
}
if(scale.axis === 'y'){
return false
}
}
Chart.defaults.scales[axisType].grid.tickColor = function({scale}){
if(scale.axis === 'x'){
return 'red';
}
if(scale.axis === 'y'){
return 'blue';
}
}
Chart.defaults.scales[axisType].ticks = Chart.defaults.scales[axisType].ticks ?? {};
Chart.defaults.scales[axisType].ticks.color = function({scale}){
if(scale.axis === 'x'){
return 'rgb(128, 0, 0)';
}
if(scale.axis === 'y'){
return 'rgb(0, 0, 192)';
}
}
}
const data = {
datasets: [
{
label: 'Some data',
showLine: true,
pointRadius: 2,
data:
[ {x: 8.25257, y: 8.25257}, {x: 9.30005, y: 12.30005}, {x: 9.90518, y: 9.90518} ],
}
]
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: false,
scales:{
x:{
type: 'linear'
},
}
},
};
new Chart(document.querySelector('#chart1'), config);
<div style="min-height:400px">
<canvas id="chart1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>