【问题标题】:Chart.js axes always show zeroChart.js 轴始终显示为零
【发布时间】:2017-06-02 08:13:06
【问题描述】:

我正在使用 Chart.js 制作一个简单的条形图,其中包含从 mysql 读取的数据。不幸的是,y 轴从随机数开始,通常高于某些条形。因此,一些条形图是不可见的,尽管它们的值应该足够高:

我已经按照here 的建议使用了scaleBeginAtZero: true-选项,但无济于事:

var ctx = $("#mycanvas");
Chart.defaults.global.scaleBeginAtZero = true;

var barGraph = new Chart(ctx, {
    type: 'bar',
    data: chartdata,
    options: {
        scaleBeginAtZero: true
    }
});

有什么想法吗?完整代码可在here获取。

【问题讨论】:

    标签: javascript bar-chart chart.js axis-labels


    【解决方案1】:

    你可以使用下面的代码。因此,条形图的 Y 轴从零开始。

    options: {
            scales : {
                yAxes : [{
                    ticks : {
                        beginAtZero : true
                    }   
                }]
            }
        }
    

    [示例代码]

    var ctx = document.getElementById("myChart1");
    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1,
                data: [65, 59, 80, 81, 56, 55, 40],
            }
        ]
    };
        var myBarChart = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            scales : {
                yAxes : [{
                    ticks : {
                        beginAtZero : true
                    }   
                }]
            }
        }
    });
    

    【讨论】:

    • 哇,它炒起来了!非常感谢!我想知道,为什么全局选项scaleBeginAtZero 不起作用,但是这个解决了它!
    猜你喜欢
    • 2021-05-21
    • 1970-01-01
    • 1970-01-01
    • 2015-09-23
    • 1970-01-01
    • 1970-01-01
    • 2011-03-15
    • 1970-01-01
    • 2016-05-02
    相关资源
    最近更新 更多