如何根据刻度值设置Chart.js刻度标签的颜色-负值为红色

j8ag8udp 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(204)

我想根据数字标签值设置Chart.js条形图和折线图中Y轴刻度标签的颜色。具体来说，我想将负值呈现为红色。此外，我想覆盖以显示“（1）”、“（2）”等，而不是显示“-1”、“-2”等。
我看过基于指数/位置更改分笔成交点标签的例子，但没有基于标签值的条件。提前感谢您的指导。

1条答案

您可以将可编写指令码的选项scales.x.ticks.color定义为颜色数组，这些颜色取决于每个数据值的Map值。下列定义范例会显示值小于10的每个长条的红色刻度标签。

scales: {
  x: {
    ticks: {
      color: data.map(v => v < 10 ? 'red' : undefined)
    }
  }
}

有关详细信息，请参阅Chart.js文档中的Tick Configuration。
请看下面的可运行代码，看看它是如何工作的。
第一个