Javascript Chart.js每个点的自定义图像

我正在使用Chart.js，我正在寻找散点图上每个点的自定义图像的帮助。我尝试过使用javascript图像数组，但它不起作用。我是画布和html5的新手

我想要的是，每个点都是用户的一个小侧面图片，而不是一个圆

请举个例子，不胜感激

我目前有：

var ctx = document.getElementById("member-graph-scatter");
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            datasets: [{
                label: 'Miles / Feet',
                data: [<?php echo $member_scatter_graph_miles_climbing; ?>],
                backgroundColor: "rgba(255,99,132,0.6)",
                borderColor: "rgba(75,192,192,1)",
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Feet Climbed (ft)'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Miles Ridden (miles)'
                    },
                    type: 'linear',
                    position: 'bottom'
                }]
            },
            showLines: false
        }
    });

var ctx=document.getElementById（“成员图分散”）；
var myChart=新图表（ctx{
键入：“行”，
数据：{
数据集：[{
标签：“英里/英尺”，
数据：[]，
背景颜色：“rgba（255,99132,0.6）”，
边框颜色：“rgba（75192192,1）”，
}]
},
选项：{
比例：{
雅克斯：[{
scaleLabel：{
显示：对，
标签串：“爬足（英尺）”
}
}],
xAxes：[{
scaleLabel：{
显示：对，
标签字符串：“迈尔斯骑（迈尔斯）”
},
类型：'线性'，
位置：'底部'
}]
},
展示路线：错误
}
});

此图形运行良好，但是，这些点显然是默认的圆

根据文件，我需要使用：

---

“如果选项是图像，则该图像将使用drawImage.image，Array”在画布上绘制，可在以下位置查看：

这里是一个更完整的示例。它显示了如何为单个点或所有点设置样式

  var yourImage = new Image()
  yourImage.src ='http://your.site.com/your_image.png';
  var imageData = {
    labels: ['one', 'two', 'three', 'four'],
    datasets: [{
      label: 'Label1',
      pointRadius: [10, 0, 10, 10],
      pointHoverRadius: 20,
      pointHitRadius: 20,
      pointStyle: ['rect', yourImage, 'triangle', 'circle'],
      pointBackgroundColor: "rgba(0,191,255)",
      data: [1.5, 2.3, 3, 2.5]
    }]
  }
  window.onload = function() {
    var lineID = document.getElementById('canvas').getContext('2d');
    var lineChart = new Chart(lineID, {
      type: 'line',
      data: imageData,
      options: {}
    });

---

我试图在一个Vue应用程序（使用Webpack构建）中实现这一点，并使用了以下解决方案。导入图像并创建图像元素，如下所示：

import myIcon from '@/assets/my-icon.svg'

const chartPoint = new Image()
chartPoint.src = myIcon

然后在chart.js数据集选项中（根据需要进行调整）：

---

获取各种类型的图像元素，但最简单的只是一个HTMLImageElement，您可以在标记或Javascript中创建它，如上所述。

请详细说明您的代码。代码应该总是带有某种解释。谢谢！：）是否可以将图像添加为标签？最后，我找到了如何为单个点设置图像，不知道可以将数组放在那里too@PardeepJain不走运。运气不好：（没问题。谢谢你的更新。@PardeepJain请查看此链接以获取标签作为图像：对于雷达图，请添加一个新的数据集，并将点作为图像

import myIcon from '@/assets/my-icon.svg'

const chartPoint = new Image()
chartPoint.src = myIcon

{
  data: data,
  pointRadius: 10,
  borderWidth: 0,
  pointStyle: chartPoint,
...
}