在移动光标工具提示时,它应随其一起移动,但其位置应固定。如何解决?
我正在使用图表JS绘制图表。 在此示例中,我们为2个数据集创建了一个双甜甜圈,并将其呈现在页面中。您可以看到所有使用Chart.js的方法。
var config = {
type: 'doughnut',
data: {
datasets: [
/* Outer doughnut data starts*/
{
data: link_count,
backgroundColor: [
"rgb(87, 193, 123)", // red
"rgb(111, 135, 216)", // green
],
label: 'Link Status'
},
/* Outer doughnut data ends*/
/* Inner doughnut data starts*/
{
data:proto_count,
backgroundColor: [
"rgb(87, 193, 123)", // red
"rgb(111, 135, 216)", // green
],
label: 'Protocol Status'
}
/* Inner doughnut data ends*/
],
labels: label_keys
},
options: {
responsive: true,
legend: {
position: 'top',
},
title: {
display: true,
text: 'INTERFACE STATUS'
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
bodyFontSize: 16,
titleFontSize : 20,
bodyFontFamily : "Courier New",
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// label: function(item, data) {
// console.log(data.labels, item);
// return data.datasets[item.datasetIndex].label+ "</br> Status : "+ data.labels[item.index]+ "</n> Count : "+ data.datasets[item.datasetIndex].data[item.index];
// }
label: function(item, data) {
var someValue = data.datasets[item.datasetIndex].label+ " : "+ data.labels[item.index];
return someValue;
},
afterLabel: function(item, data) {
var dataset = data.datasets[item.datasetIndex];
var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
var currentValue = dataset.data[item.index];
var precentage = Math.floor(((currentValue/total) * 100)+0.5);
var someValue2 = "Count : "+ data.datasets[item.datasetIndex].data[item.index]+" ("+precentage+"%)";
return someValue2;
}
}
}
}
};
var ctx = document.getElementById("myChart")
.getContext("2d");
window.myDoughnut = new Chart(ctx, config);
帮我找出问题并解决。.
提前谢谢