Question

我已经创建了一个堆叠的水平条形图，该条形图由一天中x个部分组成，每个部分中可能会有y件事在发生。如果什么都没有发生，那么我想要白色，如果有什么事情发生，然后是蓝色（在数据中将为'1'，因此将索引1的颜色拉出），最终我还将动态地更改颜色。为此，我将一天中的每一部分都放在前一天的上面，并适当地为其上色。问题是，从一天的最后一天发生事情时开始，有一个可见的边界“渗出”。

我尝试将borderWidth设置为0，也尝试将borderColor设置为白色。两者都没有任何区别。然后我将borderColor设置为黑色，宽度为0.25，以为我只是“涂满”裂缝。这在一定程度上有效，但是随着您进一步靠近轴的0点，边框变粗，反映出彼此重叠的边框数量不断增加。下图显示了带有黑色borderColor和0（仍显示蓝色）或0.25（显示了权重变化）的border出血

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，它将提供浮动条形图

如何从ChartJS2堆叠图表中消除所有边界

1 个答案: