javascript - 更改 Chart.js 刻度标签的位置

Question

我使用 Chart.js 创建了一个条形图.目前，刻度标签位于条形图的左侧。如何更改标签的位置并将它们移动到栏的顶部？

这是我的图表目前的样子:

我希望我的图表看起来像下图，标签位于条形图的顶部:

这是我在 main.js 中的选项 block :

var options_chart = {

  // showLines: false,

  scales: {
    yAxes: [{
      gridLines: {
        display: false
      },
      ticks: {
        max: 5,
        min: 0,
        stepSize: 100
      }
    }],

    xAxes: [{
      gridLines: {
        display: false
      }
    }]
  },

  legend: {
    display: false
  },
  title: {
    display: false,
  }
}

Answer 1

您可以通过向配置添加一些选项来更改刻度标签的位置，并使图表看起来像您的第二张图片。

首先，使用以下代码隐藏yAxes 和xAxes 网格线和刻度标签:

gridLines: {
    display: false,
    drawBorder: false //hide the chart edge line
},
ticks: {
    display: false
}

然后，基于显示的想法 here ，使用以下动画代码将 bar._model.label 添加到栏的顶部:

animation: {
  duration: 1,
  onComplete: function() {
    var chartInstance = this.chart;

    ctx.font = Chart.helpers.fontString(16, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);

    this.data.datasets.forEach(function(dataset, i) {
      var meta = chartInstance.controller.getDatasetMeta(i);
      meta.data.forEach(function(bar, index) {

        var label = bar._model.label;
        var xOffset = 10;
        var yOffset = bar._model.y - 42;
        ctx.fillText(label, xOffset, yOffset);
      });
    });
  }
}

动画 JSFiddle 演示:https://jsfiddle.net/actxg695/1/

---

如果您不介意标签显示在栏上，而不是在栏的顶部，而不是隐藏刻度和使用动画，您可以直接翻转使用 mirror:true 的 yAxes 上的刻度标签:

ticks: {
    mirror: true,
    fontSize: 16, //make the font slightly larger
    padding: -10 //move the text slightly away from the bar edge
}

镜像 JSFiddle 演示:https://jsfiddle.net/actxg695/2/