时间戳

首页 > 解决方案 > 在 ChartJS 散点图中显示图像而不是一个点

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/chart.js@2.8.0/dist/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

您可以在此处的 jsfiddle中看到一个工作示例

标签： javascriptjquerychart.js

解决方案

根据Chart.js 文档，pointStyle是 astring或 anImage但不是数组。

如果您想为您的点设置单独的样式，您可以使用Plugin Core API。它提供了几个可用于执行自定义代码的钩子。您可以使用钩子为每个点afterDraw分配不同的值。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>

推荐阅读