Chart.js每個點的自定義圖像

Question

我正在使用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 
     } 
    }); 

此圖工作正常，但是，點顯然是默認圈子。

根據文檔我需要使用：

「如果該選項的圖像，該圖像繪製使用的drawImage圖片，陣列在畫布上。」可見在：http://www.chartjs.org/docs/

Answer 1

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