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メソッドを使用してキャンバスに描かれている画像は、Array。」閲覧可能に：私が使用する必要がある文書によると

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