如何在 Chartjs 2 条形图中修改条形宽度答案

【问题标题】：How to modify bar width in Chartjs 2 bar charts如何在 Chartjs 2 条形图中修改条形宽度
【发布时间】：2017-01-11 23:57:32
【问题描述】：

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

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

【问题讨论】：

barStrokeWidth 可能是您需要的。

标签： javascript canvas charts chart.js

【解决方案1】：

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

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

【讨论】：

barThickness 是我可以在水平条形图上工作的唯一选项。我不喜欢如此特别地设置值 - 希望我能得到百分比工作。
所以当只有一两个值时仍然无法设置最大高度，否则它可以自动计算它？
这种对我有用。我没有使用线性刻度，所以我选择了barPercentage

【解决方案2】：

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

这是我用的：

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

【讨论】：

【解决方案3】：

请注意，似乎正在发生一些变化。实际配置取决于您使用的 v2.0。

适用于 2.0.0-alpha 版

为 xAxes 设置 categorySpacing。您可以全局执行此操作

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

或者你可以通过图表来做

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

小提琴 - http://jsfiddle.net/beehe4eg/

对于版本 1.0.2

调整选项barValueSpacing 和barDatasetSpacing 使条更接近。这会自动增加它们的宽度。

【讨论】：

它可能已经改变了，上面的答案是2.0.0-alpha。