Question

我想在ChartJS上创建条形图，但是尝试消除Y轴0条和第一个条之间的“间隙”时，我没有成功。甚至有可能吗？

这是一个差距很小的示例

这是我要实现的目标，而没有差距

HTML

<canvas id="openedCanvas" height="230" width="680"></canvas>

JavaScript

var data = {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            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
        }]
    };
var options = {}

var chart = new Chart($('#openedCanvas'), {
  type: 'bar',
  data: data,
  options: options
});

这是正在运行的Codepen https://codepen.io/fermijs/pen/ZmPRaB

谢谢：）

Answer 1

要获得预期结果，请对x轴使用scales选项

https://www.chartjs.org/docs/latest/charts/bar.html?h=scales的barPercentage与categoryPercentage部分

1.0都将堆叠在一起，因此请根据您的要求进行调整

scales: {
        xAxes: [{
            categoryPercentage: 0.99,
            barPercentage: 1.0
        }]
    }

codepen-https://codepen.io/nagasai/pen/yGYJKE

如何将ChartJS栏向左对齐？

1 个答案: