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 軸上的標簽。

 new Chart('myChart', { type: 'bar', plugins: [{ afterDraw: chart => { var ctx = chart.chart.ctx; var xAxis = chart.scales['x-axis-0']; var yAxis = chart.scales['y-axis-0']; ctx.save(); ctx.textAlign = 'center'; ctx.font = '12px Arial'; chart.data.labels.forEach((l, i) => { var value = chart.data.datasets[0].data[i]; var x = xAxis.getPixelForValue(l); ctx.fillStyle = value == 60 ? 'red' : 'blue'; ctx.fillText(value, x, yAxis.bottom + 17); }); ctx.restore(); } }], data: { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [{ label: "My First Dataset", data: [60, 59, 80, 81, 60, 55, 40], fill: false, backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"], borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"], borderWidth: 1 }] }, options: { layout: { padding: { bottom: 20 } }, scales: { xAxes: [{ ticks: { display: false } }], yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <canvas id="myChart" height="90"></canvas>