Chart.js scaleLabel位置 [英] Chartjs scaleLabel position

问题描述

尝试获取Y轴比例标签，使其看起来像图像放置在秤的顶部并且没有旋转.

Trying to get the Y axis scale labels to look like the image, to be position on top of the scale and not rotated.

缩放选项当前看起来像:

scale options currently look like:

    scales: {
  yAxes: [{
    id: 'temp',
    scaleLabel: {
      display: true,
      labelString: '°C'
    },
    type: 'linear',
    position: 'left'
  }, {
    id: 'ppm',
    scaleLabel: {
      display: true,
      labelString: 'ppm',
    },
    type: 'linear',
    position: 'left',
    ticks: {
      stepSize: 500
    }
  }, {
    id: '%',
    scaleLabel: {
      display: true,
      labelString: '%',
    },
    type: 'linear',
    position: 'right',
    ticks: {
      max: 100,
      min: 0
    }
  }]
}

https://jsfiddle.net/3a7qvtwz/2/

推荐答案

您可以使用插件核心API ，该插件提供了一系列可用于执行自定义代码的钩子.要在代码示例中的不同 yAxes 顶部绘制比例标签，可以如下定义 afterDraw 钩子.它使用 CanvasRenderingContext2D.fillText()直接在 canvas 上绘制文本.

You can use the Plugin Core API that offers a range of hooks that may be used for performing custom code. To draw the scale labels on top of the different yAxes in your code sample, the afterDraw hook could be defined as follows. It uses CanvasRenderingContext2D.fillText() to draw text directly on the canvas.

plugins:[{
  afterDraw: chart => {
    var ctx = chart.chart.ctx;
    ctx.save();
    ctx.font = "bold 14px Arial";
    ctx.fillStyle = "gray";
    var y = 50;

    ctx.textAlign = 'left';        
    ctx.fillText('CO2', 5, y);
    ctx.fillText('°C', 46, y);

    ctx.textAlign = 'right';
    ctx.fillText('%', chart.chart.width - 10, y);
    ctx.restore();
  }
}],

请查看您修改后的 JSFiddle

Please have a look at your amended JSFiddle

这篇关于Chart.js scaleLabel位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！