我是ChartJS v4.4.0的新手,我想突出显示y轴上的最大值
的数据在本例中,我希望y轴上的“19”值为红色和粗体。我该怎么做?谢谢JeLeB
fv2wmkja1#
自定义特定点元素的概念类似于@LeeLenalee关于是否可以为每个数据集的ChartJS气泡图的元素更改pointStyle的答案。您需要为backgroundColor和radius值覆盖options.elements.point。1.从数据集中获取最大值。
backgroundColor
radius
options.elements.point
let maxValue = [...dataset1, ...dataset2].sort((a, b) => b - a)[0];
字符串1.定义当point元素的值为maxValue时,覆盖其值的实现。否则,使用默认值。
maxValue
options: { elements: { point: { backgroundColor: (ctx) => ctx.raw == maxValue ? 'red' : Chart.defaults.elements.point.backgroundColor, radius: (ctx) => ctx.raw == maxValue ? 5 : Chart.defaults.elements.point.radius, } } }
型x1c 0d1x的数据
更新
误解了你的问题,你希望在y轴上设置红色和粗体的刻度标签,但不使用最高值设置点元素的样式。您应该覆盖scales.y.ticks.color和scales.y.ticks.font.weight的值。
scales.y.ticks.color
scales.y.ticks.font.weight
scales: { y: { max: maxValue, ticks: { color: (ctx) => ctx.tick.value == maxValue ? 'red' : Chart.defaults.color, font: { weight: (ctx) => ctx?.tick?.value == maxValue ? 'bold' : 'normal', } } } }
型
的Demo @ StackBlitz
1条答案
按热度按时间fv2wmkja1#
自定义特定点元素的概念类似于@LeeLenalee关于是否可以为每个数据集的ChartJS气泡图的元素更改pointStyle的答案。
您需要为
backgroundColor
和radius
值覆盖options.elements.point
。1.从数据集中获取最大值。
字符串
1.定义当point元素的值为
maxValue
时,覆盖其值的实现。否则,使用默认值。型
x1c 0d1x的数据
更新
误解了你的问题,你希望在y轴上设置红色和粗体的刻度标签,但不使用最高值设置点元素的样式。
您应该覆盖
scales.y.ticks.color
和scales.y.ticks.font.weight
的值。型
的
Demo @ StackBlitz