使用点样式时ChartJS图例背景色
使用点样式时ChartJS图例背景色
提问于 2020-07-28 13:45:41
在我的图表中，我使用点来创建圆圈，如
{
id: 7,
label: 'Sample 1',
borderColor: '#ff3f0c',
backgroundColor: '#ff3f0c',
pointBorderColor: '#ff3f0c',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointRadius: 5,
fill: false,
data: [0, 5, 2, 0, 3, 3, 5, 1, 0, 2, 2, 0]
},这方面的问题是，我的底部图例继承了点样式，更具体地说，是白色的pointBackgroundColor。
图表工具提示也有同样的问题。它不需要四舍五入，但是它用白色填充背景色。
继承与代码一起发生：
legend:
{
display: true,
position: 'bottom',
labels:
{
boxWidth: 10,
usePointStyle: true
}
},我的目标是：
- 图表点被圆整并有白色背景
- 图表图例在
backgroundColor属性 - 中被四舍五入并继承背景图表工具提示为正方形并继承
backgroundColor属性
G 215中的背景
看到问题的JSFiddle：https://jsfiddle.net/0eLtkzmy/
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-28 14:18:49
解决了问题。
https://stackoverflow.com/a/43173498/3355243
- The解决方案是维护代码，因为它是
- ，解决方案在这里，
解决方案在下面
考虑到数据集索引，应用工具提示的颜色。
options:
{
tooltips:
{
mode: 'index',
intersect: false,
callbacks:
{
labelColor: function(tooltipItem, chart)
{
var datasetIndex = tooltipItem.datasetIndex;
var borderColor = chart.legend.legendItems[datasetIndex].fillStyle;
var backgroundColor = chart.legend.legendItems[datasetIndex].fillStyle;
return {
borderColor: borderColor,
backgroundColor: backgroundColor
};
},
}
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63135605
复制相关文章
相似问题
腾讯云开发者
