CharJS 2.5.0 - 如何删除栏之间的空格

时间:2017-02-17 14:16:45

标签: javascript chart.js

我创造了这个小提琴。它包含ChartJS条形图:

https://jsfiddle.net/07pzys9t/

        var options = {
        legend: { display: false },
        animation: {
            animateScale: true
        },
        scales: {
            xAxes: [{
                barPercentage: 1,
                categoryPercentage: 1,
                barThickness : 45
            }],
            yAxes: [{
                barPercentage: 1,
                categoryPercentage: 1,
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        tooltips: {

        }
    };
   var dataForChart = {
        datasets: [{
            data: [0.2, 0.4, .78, 0.05],
            backgroundColor:["#FF6384","#4BC0C0","#FFCE56","#36A2EB"],
            borderWidth: 0
        }],
        labels: ['1', '2', '3', '4']
    };
    var chart = new Chart($("#statsRenderingResultsDeliveryClaimsChart"), {
        type: 'bar',
        data: dataForChart,
        options: options
    });

如何删除栏之间的空格?我读到了这个答案:

Chart.js Bar Chart: How to remove space between the bars in v2.3?

但它似乎不起作用,因为如果你看一下我创建的小提琴中的代码,我会在两个轴上添加barPercentagecategoryPercentage属性。

关于如何实现通缉行为的任何想法?

感谢您的关注。

1 个答案:

答案 0 :(得分:0)

如果您使用具有响应方面的图表,则不要强制使用宽度值。

您只需要使用这两个属性设置xAxes

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

而不是:

xAxes: [{
    barPercentage: 1,
    categoryPercentage: 1,
    barThickness : 45
}]

您需要使用barPercentage和categoryPercentage属性在响应方面使用百分比值。