你可以用chart.js改变条形数据集的图例样式吗?

Question

我正在使用chart.js 2.9.4

我有一个线形和条形的组合图。线数据集使用菱形('rectrot')表示点。在图例中，我希望条形数据集保持为默认的矩形，但线条数据集使用菱形样式。

options: {
aspectRatio: 1.77778,
legend: {
display: chart.displayLegend,
labels: {
usePointStyle: true,
boxWidth: 14,
fontSize: 14,
fontStyle: 'bold',
fontColor: '#404040'
},
position: 'bottom'
}
...

我设置了usePointStyle为true，此将将图例设置为我的行数据集的菱形。但是，条形数据集图例现在变成了圆形而不是矩形。我已经尝试为我的条形数据集设置pointStyle: 'rect'，但这没有效果。

是否可以使用usePointStyle适用于条形数据集，还是只适用于线形数据集?如果是这样，是否可以使用函数来设置usePointStyle的值?基于数据集的类型?

Answer 1

目前实现这一点的唯一方法是在图例选项中设置pointstyle选项，如下所示:

options: {
plugins: {
legend: {
labels: {
usePointStyle: false,
pointStyle: 'cross',
}
},
}
}

这样做的缺点是它将计算所有数据集。

我已经在chart.js中放入了一个pull request，允许在barChart数据集配置中给出pointStyle的可能性，这样你就可以有多种风格。

Github issue: https://github.com/chartjs/Chart.js/pull/8341