chart.jsのチャートとツールチップに異なる値を設定するにはどうすればよいですか？

Question

平均値と比較していくつかの属性を表示するには、chart.jsのレーダーチャートを使用します。

たとえば、特定の人の平均と比較して、size,weightおよびipd（瞳孔間距離）を表示するとよいでしょう。

ここで、単純に生の数値をグラフに入れると、各属性の値を比較することができず、奇妙な方法でレーダーダイアグラムが伸びるため、かなり奇妙に見えます。ですから、私が代わりに行うのは、すべての属性から比を取ってデータとして入れることです。たとえば、誰かが平均より10％高い場合は1.10、誰かが平均よりも5％軽い場合は0.95の重みを持つことを意味します。

しかし、データポイントにカーソルを合わせると、ツールチップにデータ値として入力した比率が表示されるので、ツールチップでSize: 1.10と表示されます。代わりに、Size: 1.85mのようなツールチップに真の価値を持たせたいと思います。

グラフを描画するために使用される実際のdataとは異なる「ツールヒント値」を持つにはどうすればよいですか？私の現在のコードは以下の通りです。

HTML：

<canvas id="chart-human"></canvas> 

JS：

var ctx = document.getElementById('chart-human'); 
var data = { 
    labels: ['Size', 'Weight', 'IPD'], 
    datasets: [ 
     { 
      label: 'Sam Smith', 
      data: [1.10, 0.95, 1.23] 
     }, 
     { 
      label: 'Average', 
      data: [1, 1, 1] 
     } 
    ] 
}; 
var options = {}; 
var chart = new Chart(ctx, { 
    type: 'radar', 
    data: data, 
    options: options 
}); 

Answer 1

あなたはtooltip's callbacks機能を使用していることを達成することができ...

var ctx = document.getElementById('chart-human'); 
 

 
var real_data = [ 
 
    ['1.85m', '100lbs', '120%'], 
 
    ['1.95m', '90lbs', '150%'] 
 
]; 
 

 
var data = { 
 
    labels: ['Size', 'Weight', 'IPD'], 
 
    datasets: [{ 
 
     label: 'Sam Smith', 
 
     data: [1.10, 0.95, 1.23], 
 
     backgroundColor: 'rgba(0,119,204,0.2)', 
 
     borderColor: 'rgba(0,119,204, 0.5)', 
 
     borderWidth: 1, 
 
     pointBackgroundColor: 'rgba(0, 0, 0, 0.4)' 
 
    }, { 
 
     label: 'John Doe', 
 
     data: [1.20, 0.85, 1.43], 
 
     backgroundColor: 'rgba(255, 0, 0, 0.15)', 
 
     borderColor: 'rgba(255, 0, 0, 0.45)', 
 
     borderWidth: 1, 
 
     pointBackgroundColor: 'rgba(0, 0, 0, 0.4)' 
 
    }, { 
 
     label: 'Average', 
 
     data: [1, 1, 1], 
 
     backgroundColor: 'rgba(0, 255, 0, 0.15)', 
 
     borderColor: 'rgba(0, 255, 0, 0.45)', 
 
     borderWidth: 1, 
 
     pointBackgroundColor: 'rgba(0, 0, 0, 0.4)' 
 
    }] 
 
}; 
 

 
var options = { 
 
    tooltips: { 
 
     callbacks: { 
 
      title: function(t, d) { 
 
       let title = d.datasets[t[0].datasetIndex].label; 
 
       return title; 
 
      }, 
 
      label: function(t, d) { 
 
       let title = d.datasets[t.datasetIndex].label; 
 
       let label = d.labels[t.index]; 
 
       let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index]; 
 
       return label + ': ' + value; 
 
      } 
 
     } 
 
    } 
 
}; 
 

 
var chart = new Chart(ctx, { 
 
    type: 'radar', 
 
    data: data, 
 
    options: options 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart-human"></canvas>