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

我正在使用Chart.js，并且正在寻找散点图上每个点的自定义图像帮助。我试过使用JavaScript数组的图像，但它不工作。我是新来的画布和HTML5。Chart.js每个点的自定义图像

我希望每个点都是用户的小轮廓图片而不是圆圈。

一个例子将不胜感激。

我目前有：

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/

来源

2016-07-27 Jimmybob

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] 
     }]

来源

2017-01-23 12:08:18 Vova

请详细说明你的代码。代码应该总是带有某种解释。谢谢！ :) – Alex

是否可以添加图像作为标签？ –

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

回答

相关问题