如何修改Chartjs 2条形图中的条形宽度

Question

有人能告诉我如何修改Chartjs 2条形图中的条形宽度吗。文档中没有任何内容。

https://github.com/nnnick/Chart.js/tree/v2.0-dev/docsI不知道该怎么办。

Answer 1

对于2.4.0版本barThickness-手动设置每个条形的宽度（以像素为单位）。如果未设置，则会自动调整条形图的大小。

options = {
    scales: {
        xAxes: [{
            barThickness : 73
        }]
    }
}

Answer 2

对我来说，在尝试2.0测试版时，有效的方法是在xAxes比例选项上设置barPercentage。

这就是我使用的：

var options = {
    data: chartData,
    type: "bar",
    options: {
        scales: {
            xAxes: [{ barPercentage: 0.5 }]
        }
    }
};
var chart = new Chart(chartCtx, options);

Answer 3

请注意，似乎有一些更改正在进行。实际配置将取决于您使用的是哪个v2.0版本

对于2.0.0-alpha版本

为xAxes设置categorySpacing。你可以在全球范围内完成

Chart.defaults.bar.scales.xAxes[0].categorySpacing = 0

或者你可以通过图表来完成

...
scales: {
    xAxes: [{
        categorySpacing: 0
    }],
...

Fiddle-http://jsfiddle.net/beehe4eg/

---

对于1.0.2版本

调整选项barValueSpacing和barDatasetSpacing以使条形图更近。这将自动增加它们的宽度。