如何在 ChartJS 中设置默认比例？

Question

如何在 ChartJS 中设置 scales 值的默认值？

我在一个页面上有一系列类似的图表，我想为它们设置一些常见的默认值，以避免为每个图表重复该配置。作为一个具体的例子，我想删除垂直网格线。要做到内联很简单：

options: {
    scales: {
        x: {
            grid: {
                display: false
            },
        },
    },
}

效果很好，但我不想在页面上重复 n 次。我尝试将其设置为默认值：

Chart.defaults.scales.x.grid.display = false;

但这会引发错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'grid')

我发现文档非常混乱，但也许 this page 建议采用如下格式：

Chart.defaults.scales[scaleID].grid.display = false;

A different section of that same page 建议“默认的 scaleID ... 是 x 和 y”。所以我尝试了：

Chart.defaults.scales[x].grid.display = false;

但这会引发一个新错误：

Uncaught ReferenceError: x is not defined

我放弃了对文档的猜测并尝试了：

console.dir(Chart.defaults.scales);

发现只有 category 和 time 这样的类型。我尝试将它们设置为：

Chart.defaults.scales.category.grid.display = false;

又出现了一个新错误：

Uncaught TypeError: Cannot set properties of undefined (setting 'display')

// Works fine
Chart.defaults.plugins.legend.display = false;

// None of these work
// Chart.defaults.scale.x.grid.display = false;
// Chart.defaults.scales.x.grid.display = false;
// Chart.defaults.scales[x].grid.display = false;
// Chart.defaults.scales.xAxisID.grid.display = false;
// Chart.defaults.scales.category.grid.display = false;

const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        data: [1, 2, 3, 4, 5, 6],
    }]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        scales: {
        // This works, but how to set it as a default?
        /*
            x: {
                grid: {
                    display: false
                },
            },
        */
        },
    }
};

const chart = new Chart(
    document.getElementById('chart'),
    config
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<canvas id="chart"></canvas>

Answer 1

在写这篇文章时，explaining it to the duck，并确认每个错误我自己解决了问题。我想我会 post 反正我花了几个小时在这上面，我自己的搜索没有发现任何有用的东西，也许它会帮助未来的人甚至未来的我。

线索是我在上次尝试时遇到的新错误：

Chart.defaults.scales.category.grid.display = false;
// Uncaught TypeError: Cannot set properties of undefined (setting 'display')

因此 grid 未定义。作为一个疯狂的绝望猜测，我试过了：

Chart.defaults.scales.category.grid = {
    display: false
};

而且有效。

如何在 ChartJS 中设置默认比例？

How to set defaults for scales in ChartJS?

chart.js