[英]Different labels in tooltip with chartjs
I am making a radar chart with chartjs. 我正在用chartjs制作雷达图。 The labels on the side of the radar I have given numbers (so the dataset Labels are numbers, 1 to 10). 雷达侧面的标签上有给定的数字(因此数据集的标签是1到10的数字)。 In the tooltip I do not want to these numbers, but a text linked to it (the text the number refers to). 在工具提示中,我不需要这些数字,但需要链接到它的文本(该数字所指的文本)。 These are in a difrent array. 这些是不同的数组。
Is there a way to do this? 有没有办法做到这一点?
At the moment I have the following code: 目前,我有以下代码:
$scope.drawGraph = function() {
radarOptions = {
scaleShowLabels : false,
scaleFontSize: 10,
pointLabelFontSize : 14,
scaleBeginAtZero: true,
showScale: true,
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 10,
scaleStartValue: 0,
showTooltips: true,
customTooltips: false,
tooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value + '%'%>"
};
var tempComp = []
for (var i = 0; i < $scope.competencesDB.length; i++) {
tempComp.push({
number: i + 1,
competence: $scope.competencesDB[i]
})
}
var tempLabels = [];
var tempData = [];
var tempName = [];
for (var i = 0; i < tempComp.length; i++) {
// console.log($scope.competencesDB[i])
tempName.push(tempComp[i].competence.name)
tempLabels.push(tempComp[i].number);
if (tempComp[i].competence.progress.length === 0) {
tempData.push(0)
} else{
tempData.push(tempComp[i].competence.progress[tempComp[i].competence.progress.length -1].value);
}
}
radarData = {
//names : tempName
labels : tempLabels,
datasets : [
{
label: tempName,
fillColor : "rgba(173, 209, 244, 0.54)",
strokeColor : "rgba(49, 137, 225, 0.94)",
data : tempData
},
]
};
//Get the context of the Radar Chart canvas element we want to select
var ctx = document.getElementById("radarChart").getContext("2d");
// Create the Radar Chart
var myRadarChart = new Chart(ctx).Radar(radarData, radarOptions);
}
I think I need to change something in the following part: 我认为我需要在以下部分中进行一些更改:
tooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value + '%'%>" 工具提示模板:“ <%if(datasetLabel){%> <%= datasetLabel%>:<%}%> <%=值+'%'%>”
But I don't know how this part of the code works. 但是我不知道这部分代码是如何工作的。 Can I but some kind of forloop in this to loop through the second datasetLabel part? 我可以在其中使用某种forloop来遍历第二个datasetLabel部分吗?
Thanks! 谢谢!
You can do this using a function instead of a template string. 您可以使用函数而不是模板字符串来执行此操作。 As you guessed you need to figure out the name
from the number
. 如您所料,您需要从number
找出name
。
Here is a generic sample 这是一个通用样本
var numberNames = [
{ number: 1, name: "Eating" },
{ number: 2, name: "Drinking" },
{ number: 3, name: "Sleeping" },
{ number: 4, name: "Designing" },
{ number: 8, name: "Coding" },
{ number: 9, name: "Cycling" },
{ number: 10, name: "Running" }
];
var data = {
labels: numberNames.map(function(e) { return e.number }),
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 9, 10, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx).Radar(data, {
tooltipTemplate: function (valueObject) {
return numberNames.filter(function (e) { return e.number === valueObject.label })[0].name + ': ' + valueObject.value;
}
});
I used numberNames
but you should be able to replace that with tempComp
(after adjusting the labels
property and the tooltipTemplate function body slightly). 我使用了numberNames
但是您应该可以用tempComp
替换它(在稍微调整了labels
属性和tooltipTemplate函数体之后)。
Fiddle - http://jsfiddle.net/80wdhbwo/ 小提琴-http: //jsfiddle.net/80wdhbwo/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.