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

Question

谁能告诉我如何修改 Chartjs 2 条形图中的条形宽度。文档中没有关于它的内容。

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

Answer 1

请注意，似乎正在发生一些变化。实际配置取决于您使用的是哪个 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 使条形更靠近。这将自动增加它们的宽度。

Answer 2

对我来说，尝试 2.0 beta，有效的是在 xAxes 比例选项上设置 barPercentage。

这是我用的：

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

Answer 3

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

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

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

How to modify bar width in Chartjs 2 bar charts

javascript

charts

canvas

chart.js