每个点的Chart.js自定义图像 [英] Chart.js Custom Image for Each Point

问题描述

我正在使用Chart.js，并且正在寻找散点图上每个点的自定义图像的帮助。我曾尝试使用JavaScript图像数组，但无法正常工作。我是画布和html5的新手。

I'm using Chart.js and I'm looking for help with custom images for each point on a scatter graph. I've tried using a javascript array of images but it isn't working. I'm new to canvas and html5.

我希望每个点都是用户的小头像而不是一个圆圈。

What I would like is for each point to be a small profile picture of the user instead of a circle.

一个例子将不胜感激。

我目前有：

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
        }
    });

此图工作正常，但是，这些点显然是默认圆。

This graph works fine, however, the points are obviously default circles.

根据文档，我需要使用：

According to documentation I need to use:

如果该选项是图像，则使用drawImage在画布上绘制该图像。 ，可以在以下位置查看数组： http://www.chartjs.org/docs/

"If the option is an image, that image is drawn on the canvas using drawImage. Image, Array" viewable at: http://www.chartjs.org/docs/

推荐答案

var yourImage = new Image(),
    yourImage.src ='http://your.site.com/your_image.png';
data = {
      labels: ['one', 'two', 'three'],
      datasets: [{
        label: 'Label1',
        pointRadius: [0,0,0,0,20],
        pointHoverRadius: [0,0,0,0,20],
        pointHitRadius: [0,0,0,0,20],
        pointStyle: ['', '', '', '', yourImage],
        data: [1,2,3]
      }, {
        label: 'label2',
        pointRadius: [0,0,0,0,20],
        pointHoverRadius: [0,0,0,0,20],
        pointHitRadius: [0,0,0,0,20],
        pointStyle: ['', '', '', '', yourImage],
        data: [1,2,3]
      }]

这篇关于每个点的Chart.js自定义图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！