ChartJS在刻度之间放置Y轴标签

p1iqtdky  于 2022-11-23  发布在  Chart.js
关注(0)|答案(3)|浏览(121)

我有下面的图表:

但是,我想将y轴标签转换为以下格式:

是否可以使用ChartJS在刻度线之间移动y轴标签,如上面的示例图像所示?
功能类似于options.scales.yAxes[].ticks.position选项,除了目前它被定义为in the x direction for the y axis,因为我需要它在y轴的y方向。更好的是,自动居中。

41zrol4v

41zrol4v1#

遗憾的是,目前ChartJS中没有用于此目的的内置方法。
您可能需要创建一个图表插件来实现这一点。

plugins: [{
   beforeDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      yAxis.options.ticks.fontColor = 'transparent'; // hide original tick
      // loop through ticks array
      Chart.helpers.each(yAxis.ticks, function(tick, index) {
         if (index === yAxis.ticks.length - 1) return;
         var xPos = yAxis.right;
         var yPos = yAxis.getPixelForTick(index);
         var xPadding = 10;
         // draw tick
         ctx.save();
         ctx.textBaseline = 'middle';
         ctx.textAlign = 'right';
         ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
         ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
         ctx.restore();
      });
   }
}]

**注意:**这将隐藏第一个刻度(从0开始)


第一次

e5njpo68

e5njpo682#

我认为您可以用途:yAxes: [{gridLines: { offsetGridLines: true }}]。标签值将是厚度之间的平均值。

y4ekin9u

y4ekin9u3#

使用当前版本的Chart.js,您可以执行以下操作:

y : {
  type: "category",
  labels,
  offset: true,
  grid: { offset: true }
}

相关问题