使用 chart.js 的条形图的 X 轴多色标签答案

【问题标题】：X-axis multiple colored label for bar chart using chart.js使用 chart.js 的条形图的 X 轴多色标签
【发布时间】：2017-10-30 14:24:56
【问题描述】：

我需要不同颜色的 x 轴标签，我使用的是“chart.js”。我尝试了下面的代码，但它不起作用，只显示单色-

scales: {
  xAxes: [{    
    ticks: {
      fontColor: [
        'rgba(245,88,97,1)',
        'rgba(245,88,97,1)',
        'rgba(245,88,97,1)',
        'rgba(145,151,163,1)',
        'rgba(70,180,220,1)',
        'rgba(70,180,220,1)',
        'rgba(70,180,220,1)'
      ]
    }
  }]
}

输出：

需要：

【问题讨论】：

标签： colors bar-chart chart.js axis-labels

【解决方案1】：

您可以使用Plugin Core API。它提供了不同的钩子，可用于执行自定义代码。在下面的代码 sn-p 中，我使用 afterDraw 钩子到 draw text 与相应的条颜色相同。

chart.data.labels.forEach((l, i) => {
  var value = chart.data.datasets[0].data[i];
  var x = xAxis.getPixelForValue(l);        
  ctx.fillStyle = chart.data.datasets[0].backgroundColor[i];
  ctx.fillText(l, x, yAxis.bottom + 17);
});

绘制自己的刻度标签时，需要指示 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 = chart.data.datasets[0].backgroundColor[i];
        ctx.fillText(l, x, yAxis.bottom + 17);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ["-3", "-2", "-1", "0", "+1", "+2", "+3"],
    datasets: [{
      label: "My First Dataset",
      data: [60, 59, 80, 81, 60, 55, 40],
      fill: false,
      backgroundColor: ['rgba(245,88,97,1)', 'rgba(245,88,97,1)', 'rgba(245,88,97,1)',     'rgba(145,151,163,1)', 'rgba(70,180,220,1)', 'rgba(70,180,220,1)', 'rgba(70,180,220,1)'],
      borderWidth: 1
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 20
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 300px
}

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

【讨论】：