javascript - 在ChartJS散点图中显示图像而不是点

我正在尝试用PNG图像替换散点图的点。根据文档，pointStyle接受字符串或图像。但是，它没有显示第一个点上的图像，而是显示了规则的散点图点。有任何想法吗？

var ctx = document.getElementById("myChart").getContext('2d');
var img = new Image();
var img1 = img.src = 'assets/img/small/STORM.png';
var imageData = {
  datasets: [{
    pointStyle: [img1, 'rect', 'triangle', 'circle'],
    data: [{
      x: 1.447377,
      y: -0.014573
    }, {
      x: 2.365398,
      y: -1.062847
    }, {
      x: -2.507778,
      y: 0.389309
    }, {
      x: -0.432636,
      y: 0.124841
    }]
  }]
}

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: imageData,
  options: {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

您可以在jsfiddle here中看到一个工作示例

最佳答案

根据Chart.js documentation，pointStyle是string或Image，但不是数组。

如果要为每个点设置单独的styles，则可以使用Plugin Core API。它提供了几个可用于执行自定义代码的挂钩。您可以使用afterDraw钩子(Hook)为每个点分配不同的pointStyle。

plugins: {
  afterUpdate: function(chart) {
    const meta = chart.getDatasetMeta(0);
    meta.data[0]._model.pointStyle = img;
    meta.data[1]._model.pointStyle = 'rect';
    meta.data[2]._model.pointStyle = 'triangle';
    meta.data[3]._model.pointStyle = 'circle';
  }
},

在下面的修改后的代码中，我使用了稍微不同但更紧凑的方法，并在图表配置之外定义了pointStyles数组。

const img = new Image();
img.src = 'https://i.stack.imgur.com/gXQrT.png';
const pointStyles = [img, 'rect', 'triangle', 'circle'];

new Chart(document.getElementById('myChart'), {
  type: 'scatter',
  plugins: {
    afterUpdate: chart => {
      chart.getDatasetMeta(0).data.forEach((d, i) => d._model.pointStyle = pointStyles[i]);
    }
  },
  data: {
    datasets: [{
      data: [
        {x: 1.447377, y: -0.014573},
        {x: 2.365398, y: -1.062847},
        {x: -2.507778, y: 0.389309},
        {x: -0.432636, y: 0.124841}
      ],
      backgroundColor: ['white', 'green', 'red', 'orange'],
      pointRadius: 10
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>