相关疑难解决方法(0)

我正在使用Chart.js,我正在寻找散点图上每个点的自定义图像的帮助.我已经尝试使用javascript数组图像,但它无法正常工作.我是canvas和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
        }
    });

此图表工作正常,但这些点显然是默认圆圈.

根据我需要使用的文档:

"如果选项是图像,则使用drawImage在画布上绘制该图像.图像,数组"可在以下网址查看:http://www.chartjs.org/docs/

我正在尝试用 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>

您可以在此处查看 …