Chart.js实现横向柱状图及Y轴标签显示在条形上方问题求助

一、切换为横向柱状图（Chart.js v2.9.4版本） #

直接修改以下两处配置即可：

1. 图表类型修改：将Chart配置中的type: 'bar'改为type: 'horizontalBar'
2. 坐标轴逻辑调整：横向柱状图的数值轴为X轴，原Y轴的数值格式化逻辑需要转移到xAxes配置中，调整后的scales代码参考：

scales: {
  xAxes: [{
    ticks: {
      beginAtZero: true,
      precision: 2,
      userCallback : function(value, index, values) {
        if(parseInt(value) >= 1000){
          return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else {
          return '$' + value;
        }
      }
    }
  }],
  yAxes: [{
    ticks: {
      display: true
    }
  }]
}

二、实现Y轴文本显示在条形上方 #

通过Chart.js的绘制钩子直接在画布上渲染自定义文本即可，无需额外插件，修改后的完整TS代码参考：

createAreaChart() {
  this.barChart1 = document.getElementById('barChart1');
  this.ctx1 = this.barChart1.getContext('2d');

  let i = 0;
  this.data1.forEach(div => {
    if(i==0){
      this.backgroundColors.push('#A60A2D');
    } if(i==1) {
      this.backgroundColors.push('#00A2C3');
    } if(i==2) {
      this.backgroundColors.push('#434F55');
      i = -1;
    }
    i++;
  });

  this.chart1 = new Chart(this.ctx1, {
    type: 'horizontalBar',
    data: {
      labels: this.data1.map(r => r.icon),
      datasets: [{
        data: this.data1.map(r => r.total),
        label: 'Annual Cost',
        backgroundColor: this.backgroundColors,
        borderColor: this.backgroundColors,
        borderWidth: 1
      }]
    },
    options: {
      legend: {
        display: false
      },
      animation: {
        onComplete: function() {
          const chartInstance = this.chart;
          const ctx = chartInstance.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
          ctx.textAlign = 'left';
          ctx.textBaseline = 'bottom';
          ctx.fillStyle = '#000'; // 可自定义文本颜色

          this.data.datasets.forEach(function(dataset, i) {
            const meta = chartInstance.controller.getDatasetMeta(i);
            meta.data.forEach(function(bar, index) {
              const label = chartInstance.data.labels[index];
              // 文本位置从条形左上角偏移2px，避免贴合过近
              ctx.fillText(label, bar._model.x + 2, bar._model.y - 2);
            });
          });
        }
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var value = data.datasets[0].data[tooltipItem.index];
            if (parseInt(value) >= 1000) {
              return '$' + value.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
            } else {
              return '$' + value.toFixed(2).toString();
            }
          }
        }
      },
      scales: {
        xAxes: [{
          ticks: {
            beginAtZero: true,
            precision: 2,
            userCallback : function(value, index, values) {
              if(parseInt(value) >= 1000){
                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
              } else {
                return '$' + value;
              }
            }
          }
        }],
        yAxes: [{
          ticks: {
            display: false // 不需要原生Y轴标签可设为false
          }
        }]
      }
    }
  });
  this.chart1.height = 225;
}

如果需要动画过程中也显示文本，把相同的绘制逻辑复制到options.animation.onProgress回调中即可。

内容的提问来源于stack exchange，提问作者Jesus