如何在chart.js中为图表和工具提示设置不同的值？

问题描述：

我想使用chart.js中的雷达图表来显示与平均值相比较的几个属性。如何在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 
});

答

你可以完成，使用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>

如何在chart.js中为图表和工具提示设置不同的值？

相关推荐