如何在 Y 轴上显示一定数量的刻度？答案

【问题标题】：How can I display a set amount of ticks on the Y Axis?如何在 Y 轴上显示一定数量的刻度？
【发布时间】：2026-02-16 18:25:02
【问题描述】：

我有一个图表，其中我已经知道我需要的固定刻度数。有 3 个带有分组条形图的图表。我正在为如何强迫它而挠头。现在它显示 0 到我的数据集中的任何数字，并根据需要自动缩放。

默认情况下，假设我使用数字进行缩放，但在这种情况下，它是 Y 轴上的正数、中性、负数（字面意思是那些标签），它们是与 X 轴上特定日期相关的数据点（带有 2标记为 AM/PM 的分组条形图）。

Chart.js 文档似乎没有解释如何在刻度配置上的数字之外工作时进行调整，我不确定如何将它硬塞进去。有什么想法吗？以下是据我所知的代码。

截图示例我基本上通过选择 4,8 和 12 来模拟 3 个数据点。我希望这些标签为（负、正、中性）并使所有其他刻度消失。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
        datasets: [{
            label: 'Dataset 1', backgroundColor: window.chartColors.red,
stack: 'Stack 0',
            data: [4, 12, 4, 8, 12, 4]
        },{
            label: 'Dataset 1', backgroundColor: window.chartColors.blue,
stack: 'Stack 1',
            data: [8, 8, 12, 4, 4, 12]          
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

【问题讨论】：

请显示您当前拥有的代码，包括当前输出的示例（例如屏幕截图），如果可能，请提供所需输出的示例。
@p.s.w.g 我已经用当前运行的代码和图表的屏幕截图（链接，因为我还没有图像权限）更新了帖子。我还更新了代码之前的描述，以便您了解我要做什么的“要点”

标签： javascript chart.js axis-labels

【解决方案1】：

你只需要在滴答声中添加回调，

<canvas id="myChart" width="400" height="400"></canvas>
<script src='Chart.js'></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Date/MoonCenter', 'Date/MoonCenter', 'Date/MoonCenter'],
            datasets: [{
                label: 'Dataset 1', backgroundColor: window.chartColors.red,
                stack: 'Stack 0',
                data: [4, 12, 4, 8, 12, 4]
            }, {
                label: 'Dataset 1', backgroundColor: window.chartColors.blue,
                stack: 'Stack 1',
                data: [8, 8, 12, 4, 4, 12]
            }]
        },
        options: {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,
                            callback: function (label, index, labels) {
                                switch (label) {
                                    case 4:
                                        return 'negative';
                                    case 8:
                                        return 'positive';
                                    case 12:
                                        return 'neutral';
                                }
                            }
                        }
                    }
                ]
            }
        }
    });
</script>

【讨论】：

有没有办法使用相同的开关盒来强制最大值？例如，如果我没有案例 12，那么它会在不显示该刻度的情况下缩短图表（在此示例中为中性）。我不会总是在一个日期范围内同时拥有所有 3 个，但将图表 Y 轴的三分之一切掉可能会令人不安
对此有任何跟进吗？这只是部分解决方案。它没有解决如果我的数据范围没有最高值，它会将其截断为两个底部的值。我希望始终显示 3 张门票。

【解决方案2】：

除了扫罗的回答：只需将 max-settings 添加到 y 轴即可。

ticks: {
  max: 12
}

如果要显示“正”、“负”和“中性”而不是 4、8 和 12，您还必须对工具提示进行回调。

【讨论】：