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

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

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

Answer 2

如果可以使用SVG格式，面临同样的问题。该解决方案将为您提供帮助。

获取SVG的xml字符串。
动态生成它，如下面的代码段所示。

let svg = `<?xml version="1.0" encoding="utf-8"?> <svg height="16px" width="16px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-297 389 16 16" style="enable-background:new -297 389 16 16;" xml:space="preserve" transform-origin="center" transform="rotate(${Math.floor(history.direction)})"> </svg>`; let yourImage = new Image(); let parser = new DOMParser(); yourImage.src =`data:image/svg+xml;base64,${btoa(svg)}`;

您可以根据需要修改svg，只需使用其属性即可。例如transform=rotate(40)等。

如何在chart.js中旋转自定义标记？

2 个答案: