ChartJS条形图差距

时间:2017-01-03 14:18:02

标签: javascript charts chart.js

我正在使用ChartJS创建一个简单的静态条形图。如图所示,第一个x值(1月)和y轴之间存在小的差距。有没有办法去除那个间隙并让第一个x轴值开始/拥抱在y轴(点:0,0)?我查看过ChartJS文档,我尝试过的所有内容都无法正常工作。从我的研究看来,你应该能够通过选项对象实现这一点,但我不知所措。非常感谢任何和所有的帮助!

谢谢!

enter image description here

1 个答案:

答案 0 :(得分:1)

为图表设置以下选项。它会起作用

var myBarChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales : {
            xAxes : [{
                barPercentage : 1,
                categoryPercentage : 1
            }]
        }
    }
});

enter image description here

[<强>采样代码

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 : {
            xAxes : [{
                barPercentage : 1,
                categoryPercentage : 1
            }]
        }
    }
});