如何扩展chart.js中数据的“ Y”比例?

时间:2018-07-09 13:48:32

标签: chart.js

如何扩展数据的“ Y”比例以使其看起来更漂亮?条形数据被图形的顶部边框截断。如果最大数量为100,则显示例如110,这将是顶部边框的一小部分填充。

我的代码:https://jsfiddle.net/selvestrstal/ent8zchq/

var data = {
   labels: ["January", "February", "March", "April", "May", "June", "July"],
   datasets: [{
      label: "First dataset",
      data: [65, 100, 100, 81, 56, 55, 90]
   }, {
      label: "Third dataset",
      data: [38, 55, 50, 65, 35, 67, 54]
   }]
}; 

var chart = new Chart('graph_data', {
    type: 'line',
    data: data,
    options: {
        maintainAspectRatio: false,
        responsive: true,
        filler: {
            propagate: true
        },
        tooltips: {
            mode: 'index',
            intersect: false,
            callbacks: {
                title: function(i, val) {
                    return [0].xLabel;
                },
            },
        },
        legend: {
           display: true,
        },
        layout: {
            padding: {
                left: 5,
                right: 5,
                top: 5,
                bottom: 10
            }
        },
        scales: {
            padding: 10,
            xAxes: [{
                display: true,
                ticks: {
                    autoSkip: true,
                    offset: true,
                    maxRotation: 0,
                    padding: 5,
                },
                scaleLabel: {
                    display: true,
                }
            }],
            yAxes: [{
                display: true,
                 ticks: {
                    autoSkip: true,
                    offset: true,
                    maxRotation: 0,
                    beginAtZero: false,
                    padding: 5,
                },
            }]
        }
    }
});

enter image description here enter image description here

1 个答案:

答案 0 :(得分:1)

覆盖比例:

尝试这样的事情:

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}

max选项也是可行的,因为它可以帮助问题的作者。