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

Question

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

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

我希望我的图表如下图所示，标签位于条形顶部：

这是我在 main.js 中的选项块：

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
}

然后，基于此处显示的想法，使用以下动画代码将 to 添加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/

如果您对条形图上显示的标签没有问题，而不是在条形图顶部显示，而不是隐藏ticks和 使用animation，您可以使用将刻度标签翻转到 yAxes 上mirror:true：

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

镜像JSFiddle Demo：https ://jsfiddle.net/actxg695/2/