ChartJS折线图编辑yAxis标签

时间:2017-02-01 14:54:46

标签: chart.js linechart

试图让ChartJS的线图按照客户的意愿运作,但我遇到了一个问题:当整周的数据(我们做销售)为0时,yAxis上的标签就会出现低于0 - 这是我们的客户不想要的东西。我查看了 scaleoverride suggestMin beginAtZero ,但都没有效果。

如何更改标签,使其始终为0?

下面的免费图片,可视化问题:

enter image description here

代码(我试过的一种非工作方法):

var canvas = document.getElementById('salesChart').getContext('2d');
salesChart = new Chart(canvas, {
    type: 'line',
    scaleOverride: true,
    scaleSteps: 10,
    scaleStepWidth: 20,
    scaleStartValue: 0,
    data: {
        labels: chartLabels,
        datasets: [{
            label: 'Sales',
            data: chartData,
            backgroundColor: "rgba(37,185,153,0.7)"
        }],
    },
    options: {
        maintainAspectRatio: false,
        responsive: true
    }
});

1 个答案:

答案 0 :(得分:1)

这对我有用:

options: {
    maintainAspectRatio: false,
    responsive: true,
     scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

注意:我按原样保留了图表配置的其余部分。您没有明确提供chartLabels和chartData变量,因此我使用了:

var chartLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var chartData = [0, 0, 0, 0, 0, 0, 0];

小提琴:https://jsfiddle.net/3c4yq5oq/