web-dev-qa-db-ja.com

Chart.js：横棒グラフの棒間隔

横棒グラフ

  var barOptions_stacked1 = {
                tooltips: {
                    enabled: true
                },
                hover: {
                    animationDuration: 0
                },
                scales: {
                    xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontFamily: "'Open Sans Bold', sans-serif",
                                fontSize: 11
                            },
                            scaleLabel: {
                                display: false
                            },
                            gridLines: {
                            },
                            stacked: true
                        }],
                    yAxes: [{
                            barThickness: 20,
                            gridLines: {
                                display: false,
                                color: "#fff",
                                zeroLineColor: "#fff",
                                zeroLineWidth: 0
                            },
                            ticks: {
                                fontFamily: "'Open Sans Bold', sans-serif",
                                fontSize: 11
                            },
                            stacked: true
                        }]
                },
                legend: {
                    display: true
                },
                pointLabelFontFamily: "Quadon Extra Bold",
                scaleFontFamily: "Quadon Extra Bold"
            };
            var ctx1 = document.getElementById("Chart1");
            var myChart1 = new Chart(ctx1, {
                type: 'horizontalBar',
                data: {
                    labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
                    datasets: [{
                            data: [727, 589, 537, 543, 574],
                            backgroundColor: "rgba(63,103,126,1)",
                            hoverBackgroundColor: "rgba(50,90,100,1)",
                            label: "newly request"
                        }, {
                            data: [238, 553, 746, 884, 903],
                            backgroundColor: "rgba(163,103,126,1)",
                            hoverBackgroundColor: "rgba(140,85,100,1)",
                            label: "in progress"
                        }, {
                            data: [1238, 553, 746, 884, 903],
                            backgroundColor: "rgba(63,203,226,1)",
                            hoverBackgroundColor: "rgba(46,185,235,1)",
                            label: "active"
                        }, {
                            data: [1338, 553, 746, 884, 903],
                            backgroundColor: "rgba(255,169,188,1)",
                            hoverBackgroundColor: "rgba(255,99,132,1)",
                            label: "in approval"
                        }, {
                            data: [1438, 553, 746, 884, 903],
                            backgroundColor: "rgba(136,202,247,1)",
                            hoverBackgroundColor: "rgba(54,162,235,1)",
                            label: "recycle"
                        }, {
                            data: [1538, 553, 746, 884, 903],
                            backgroundColor: "rgba(196,232,116,1)",
                            hoverBackgroundColor: "rgba(152,177,98,1)",
                            label: "reject"
                        }]
                },
                options: barOptions_stacked1
            });
<canvas id="Chart1"></canvas>

バーの間隔を狭める方法。 categorySpacing、barValueSpacingを試しましたが、何も機能しません！小さい幅では問題なく見えますが、全画面幅の場合、バー間の間隔のために高さが増加します。キャンバスのインラインcssは、デフォルトのchartjsでオーバーライドされているため機能しません。また、チャートの初期化中にチャートの高さを設定できません：ctx1.canvas.height = 300;動かない！ jsfiddleリンク リンク

chartsbar-chart
7
Sud

barPercentageとcategoryPercentageの両方を1に設定すると、バーの間隔を削除できます。

yAxes: [{
    barPercentage: 1.0,
    categoryPercentage: 1.0,
}],

ただし、barThicknessはこれらの設定を上書きするようです。私が見つけた唯一の解決策は、グラフの親要素の高さを固定値に設定し、maintainAspectRatioオプションをfalseに設定してbarThicknessを削除することですオプション。

注：私はangular-chart.jsを使用しています

10
xuhcc

私にとってうまくいったのは、キャンバスの高さを強制することでした。

document.getElementById("chart1").height = labels.length * 12 + 24;

12はバーの高さで、12はタイトルやx軸ラベルなどに対応するためのものです。maintainAspectRatio：false、barPercentage、categoryPercentageなどのオプションを削除できます。

1
Manish