设置单个轴的 Chartjs 全局默认值

Question

根据文档，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 多个图表）中。

chartDefaults.js

// 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,
  }
};

Answer 1

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>