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

问题描述 投票:0回答:1

根据文档,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,
  }
};
chart.js
1个回答
0
投票

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>

© www.soinside.com 2019 - 2024. All rights reserved.