javascript - 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

您可以使用 Plugin Core API .它提供了不同的钩子(Hook)，可用于执行自定义代码。在下面的代码片段中，我使用 afterDraw Hook draw text每个栏下方都有所需的样式。

When drawing your own tick labels, you need to instruct Chart.js not to display the default labels. This can be done through the following definition inside the chart options.

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

You also need to define some padding for the bottom of the chart, otherwise you won't see your custom tick labels.

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>