Question

尝试让Y轴刻度标签看起来像image，位于刻度顶部而不是旋转。

比例选项目前看起来像：

    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/

Answer 1

您可以使用Plugin Core API来提供一系列可以用于执行自定义代码的挂钩。要在代码示例中的不同yAxes上方绘制比例标签，可以如下定义afterDraw钩子。它使用CanvasRenderingContext2D.fillText()直接在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

Answer 2

https://github.com/chartjs/Chart.js/issues/3706

它仍然不受支持，但是有一种解决方法。

标题：{ 显示：true，文字：['realTile'，'leftScalelabel ...............................

许多空间.................................... .......... rightScalelabel'] }

Chartjs scaleLabel的位置

2 个答案: