Chartjs 在回调函数中更改 x 轴的特定标签颜色

Question

我开发了在条形图中显示一些数据的程序，我使用chart.js并配置我的数据，我只想自定义标签并使特定标签加粗和红色

我在 (ticks) 属性中使用回调函数来访问标签的值

  xAxes: [{
      ticks: {
          fontFamily: "IRANSans",
          fontSize: 16,
          autoSkip: false,
          callback: function(value) {
              if (value === 'some_value') {
                  return (make color red)
              } else {
                  return (make color blue)
              }
          }
      }
  }]

当条件等于 some_value 时，我只想更改标签的颜色，请帮我更正我的代码:) 非常感谢:)

Answer 1

您可以使用插件核心 API。它提供了可用于执行自定义代码的不同挂钩。在下面的代码片段中，我使用afterDraw钩子在每个条形下方绘制具有所需样式的文本。

当绘制自己的刻度标签时，您需要指示 Chart.js 不要显示默认标签。这可以通过图表选项中的以下定义来完成。

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }], 

您还需要为图表底部定义一些填充，否则您将看不到自定义刻度标签。

layout: {
  padding: {
    bottom: 20
  }
},

请查看以下示例代码，该代码说明了如何根据值更改 x 轴上的标签。

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }], 

layout: {
  padding: {
    bottom: 20
  }
},