web-dev-qa-db-ja.com

Chartjs 2棒グラフの棒幅を変更する方法

Chartjs 2棒グラフで棒の幅を変更する方法を教えてもらえますか。ドキュメントにはそれについて何もありません。

https://github.com/nnnick/Chart.js/tree/v2.0-dev/docsI 何をすべきかわからない。

javascriptcanvaschartschart.js
16
VictorArcas

いくつかの変更が行われているようです。実際の構成は、使用している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を調整して、バーを近づけます。これにより、自動的に幅が広がります。

8
potatopeelings

バージョン2.4.0の場合barThickness-各バーの幅をピクセル単位で手動で設定します。設定しない場合、バーは自動的にサイズ変更されます。

options = {
    scales: {
        xAxes: [{
            barThickness : 73
        }]
    }
}
30
Mihail Lebedev

私にとって、2.0ベータ版を試してみたところ、xAxesスケールオプションでbarPercentageを設定することが効果的でした。

これは私が使用したものです：

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