CharJS 2.5.0-如何删除条之间的空间 [英] CharJS 2.5.0 - How to remove space between bars

问题描述

我创建了这个小提琴.它包含一个ChartJS条形图:

I created this fiddle. It contains a ChartJS bar chart:

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
    });

如何删除条形之间的空间?我读了这个答案:

How can I remove the space between the bars? I read this answer:

但是它似乎不起作用，因为如果您查看我创建的小提琴中的代码，则会在两个轴上添加 barPercentage 和 categoryPercentage 属性.

But it doesn't seem to work because if you look at the code in the fiddle I created I add the barPercentage and categoryPercentage properties on both axes.

关于如何实现所需行为的任​​何想法吗?

Any idea on how to achieve the wanted behaviour?

感谢您的关注.

推荐答案

如果您将图表与自适应方面结合使用，则不会对栏施加强制宽度值.

If you use chart with responsive aspect, you don't be force a width value to your bars.

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

You just need set your xAxes with this two attributes

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

而不是:

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

您需要使用带有barPercentage和categoryPercentage属性的响应方面的百分比值.

You need use percent value with responsive aspect using barPercentage and categoryPercentage attributes.

这篇关于CharJS 2.5.0-如何删除条之间的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！