javascript - 如何在 Chart.js 中旋转自定义标记？

Question

我有这个问题 - 我希望我的图表具有根据数据集中的值旋转的自定义标记(点)。我有自定义标记(箭头)，但我不知道如何旋转它们。我正在使用 Chart.js

我的 JS 代码:

    var canvas = document.getElementById('myChart');
    var ctx = canvas.getContext('2d');

    var yourImage = new Image(30, 30);
    yourImage.src = 'arrow.png';
    var myChart = new Chart(canvas, {
      type: 'scatter',
      data: {
       datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: 1,
            y: 1.45
            }, {
            x: 2,
            y: 0.25
            }, {
            x: 3,
            y: 2.56
            }, {
            x: 4,
            y: 1.65
           }],
           pointStyle: yourImage,
       }]
    },
    options: {
    scales: {
           xAxes: [{
               type: 'linear',
               position: 'bottom'
           }]
          }
       }
    });

Answer 1

看起来您需要将代码添加到 drawPoint helpers.canvas.js 中的函数。如果该点是图像对象，请根据需要旋转 Canvas ，绘制图像，然后将上下文旋转回标准方向。这样做的一个例子是 here .

我对库和工具链了解不够，无法编写功能代码，但这两个链接应该可以帮助您入门。