时间戳

首页 > 解决方案 > Chartjs在回调函数中更改x轴中的特定标签颜色

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

问题描述

我开发了在条形图中显示一些数据的程序，我使用 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 我只想更改标签的颜色时请帮我纠正我的代码:) 非常感谢:)

标签： javascriptchart.js

解决方案

您可以使用插件核心 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>

推荐阅读