减少条形间距图JS v2

Question

我会画一个间距很小的粗条

实际上，当我减少条细时，条之间会出现缝隙。

我想像照片中那样缩小这种距离

这是我实际上拥有的

这里是reproduction

var options = {
    responsive: false,
    legend: {
        display: false
    },
    animation: {
        animateScale: true
    },
    scales: {
        xAxes: [{
            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
});

Answer 1

有一个图表帮助程序API，用于存储特定页面的图表的所有实例。您可以利用它来找出是否不存在，然后创建逻辑，否则更新逻辑。

请参阅下面的示例。这不是最精确的逻辑，而只是一个想法。

 var chartUpdated  = false;

Chart.helpers.each(Chart.instances, function(instance) {
  if (instance.chart.canvas.id === "yourCanvasId") {
    //perform the update logic
    chartUpdated = true;
    return;
  }  
});

if(!chartUpdated)
{
    //perform the create logic
}