图表js小条太细 - Javascript

最近在使用图表js时，遇到了一个问题：小条太细了，难以辨认。经过多方尝试和查询，我总结了以下几种解决方案。

1. 改变小条宽度

可以通过修改小条宽度来解决小条太细的问题。

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            barThickness: 50
        }]
    }
}

其中，barThickness 即为小条宽度，可以自行修改数值。

2. 增加小条数量

利用多个小条代替一个小条，可以更清晰地展示数据。

如下所示，将一个小条分为3个小条：

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            stacked: true
        }]
    }
}

设置 stacked: true 之后，分割的小条会重叠在一起。

3. 使用分组柱状图

将小条按相关性分组，可以更清晰地展示数据之间的关联性。

如下所示，将小条分为两组并分别展示：

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }],
        xAxes: [{
            stacked: true
        }]
    }
}

设置 stacked: true 可以将小条分组并重叠在一起。

通过以上三种方法中的任意一种，可以有效解决小条太细的问题。