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
}

然后，根据显示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/

如果您对条形图上显示的标签没有问题，而不是隐藏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演示：https://jsfiddle.net/actxg695/2/

Answer 2

如果您对显示在栏上的标签没问题，而不是在栏的顶部，而不是隐藏刻度和使用动画，您可以使用 mirror:true 在 yAxes 上翻转刻度标签：

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);
        });
    });
  }
}

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

2 个答案: