如何在chart.js中爲圖表和工具提示設置不同的值？

Question

我想使用chart.js中的雷達圖表來顯示與平均值相比較的幾個屬性。

例如，我可能想要顯示特定人的size,weight和ipd（瞳孔間距）與平均值的比較。

現在，如果我只是將原始數字放入圖表中，那看起來很奇怪，因爲每個屬性的值都不能相互比較，並且會以一種奇怪的方式拉伸雷達圖。所以我所做的就是從每個屬性取一個比例，並將其作爲數據。例如，這可能意味着如果某人比平均數高10％，或者權重爲0.95，那麼我的尺寸爲1.10，如果某人比平均數輕5％。

但是現在，當鼠標懸停在數據點上時，工具提示會顯示作爲數據值輸入的比率，所以工具提示會告訴我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>