简体   繁体   English

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

[英]Vertical spacing in horizontal ChartJS Bar Graph

I'd like to have more spacing between the bars in my horizontal bar graph. 我想在水平条形图中的条形之间有更大的间距。 It looks terrible on a mobile device, and barely acceptable on a desktop browser. 它在移动设备上看起来很糟糕,而在桌面浏览器上几乎不能接受。 How can I accomplish this? 我该怎么做?

ChartJs Version: 2.4.0 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 桌面检视 桌面检视

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM