Question

我有一张图表，在该图表中我已经知道我需要的刻度线数量。有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>

Chart as it looks currently

Answer 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>

Answer 2

扫罗的答案之外：只需将最大设置添加到y轴即可。

ticks: {
  max: 12
}

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

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

2 个答案: