Question

我希望图表js折线图上的数据应采用旋转形式，这是我的代码：

meta.data.forEach(function (bar, index) {
      var data = iData[index].data;
      if(index <=  4 ){
        ctx.rotate(-Math.PI / 4);
        ctx.save();
        ctx.fillText("" + data + ",", bar._model.x, bar._model.y);
        ctx.restore();
       }
   });

enter image description here 我希望图表上的数据像标签一样呈旋转形式。我已经尝试过canvas旋转方法，但是没有给我正确的结果，它没有放在bar._model.x和bar._model.y的位置上。这是它的图像 enter image description here 谁能建议我解决方案？预先感谢。

Answer 1

旋转后，画布的轴成一定角度。如果尝试将fillText与x和y一起使用，它们将沿着旋转轴，这就是为什么文本位置不正确的原因。请尝试先将translate移到正确的位置，然后再rotate，再用fillText将x = y = 0移到正确的位置。这样会将文本放置在正确的位置，然后将其旋转到位。

此外，您应在转换上下文矩阵之前调用save。

尝试以下操作：

ctx.save();
ctx.translate(bar._model.x, bar._model.y);
ctx.rotate(-Math.PI / 4);
ctx.fillText("" + data + ",", 0, 0);
ctx.restore();

chart js-旋转形式的图表数据

1 个答案: