如何消除chartjs2堆叠图中的所有边框

Question

我已经创建了一个堆叠的水平条形图，它由一天中的x个部分组成，在每个部分期间可能会发生y个事情。如果什么都没有发生，那么我想要白色，如果发生了什么，那么蓝色(它将是数据中的'1‘，因此拉出索引为1的颜色)，最终我也会动态地改变颜色。为了创建它，我将一天中的每个部分堆叠在前一个部分之上，并对其进行适当的着色。问题是，当有事情发生时，会有一个可见的边界从一天中最新的部分“出血”下来。

我已经尝试将borderWidth设置为0，我也尝试将borderColor设置为白色。两者都没有起到任何作用。然后，我将borderColor设置为黑色和0.25的宽度，认为我只是‘油漆’的裂缝。这在一定程度上是有效的，但随着您进一步靠近轴的0点，边界会变厚，反映出相互重叠的边界数量不断增加。下图显示了带有黑色borderColor和0(仍显示蓝色)或0.25 (显示不断变化的权重) borderWidth的出血边界

https://ibb.co/Mc5dZ86

https://ibb.co/TPKGtFJ

const data = this.props.ChartData;


    var datasets = []

        const Colors = ["white", "#1B79EC", "#fc407e",]

        for (let i=1; i<data[1].length; i++)
        {datasets.push(

            {   label: data[0],
                data: [data[1][i][0]],
                backgroundColor: [Colors[data[1][i-1][1]]],
                borderColor: ['black'],
                borderWidth: 0} )
    }


    return (

                    <Chart data={
                        {
                            labels: [data[0]],
                            datasets: datasets,

                        }}

                           options={{
                               responsive: true,
                               maintainAspectRatio: false,
                               legend: {
                                   display: false
                               },
                               scales: {
                                   yAxes: [{
                                        stacked:true,
                                        display: true,

                                   }],
                                   xAxes: [{

                                        display:false,
                                       ticks: {
                                           beginAtZero: true,
                                           autoSkip: false,
                                       },
                                   }],
                               }
                           }}
                    />

    )
}

Answer 1

这里有一个用于ChartJS的插件：https://github.com/cprimera/Chart.MultiFloatingBar.js，它将提供一个浮动条形图