水平ChartJS条形图中的垂直间距

时间:2017-01-11 23:21:58

标签: javascript graph chart.js

我想在水平条形图中的条之间留出更多间距。它在移动设备上看起来很糟糕,在桌面浏览器上几乎无法接受。我怎么能做到这一点?

ChartJs版本:2.4.0

    function renderBarChart(chartDomID, title, labels, dataPoints, barColor) {
    var ctx = document.getElementById(chartDomID).getContext("2d");

    var chart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: title,
                    data: dataPoints,
                    fill: false,
                    pointBorderColor: barColor,
                    backgroundColor: barColor,
                    borderColor: barColor
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                yAxes: [{
                    display: true,
                    ticks: {
                        // Suggest to start the y-axis at 0, if ChartJS thinks it makes sense.
                        suggestedMin: 0
                    }
                }]
            },
            legend: {
                display: false
            }
        }
    });

移动视图 Mobile View

桌面视图 Desktop View

1 个答案:

答案 0 :(得分:0)

您必须在此处添加宽度和高度作为示例。

<canvas id="myChart" width="700" height="900"></canvas>