我正在尝试始终在ChartJS中显示多数据集折线图的工具提示
现有解决方案仅适用于单个数据集(例如Chart.js - Doughnut show tooltips always?),如下所示:
var options =
{
tooltipTemplate: "<%= value %>",
onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
//Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
//this.showTooltip(this.datasets[0].bars, true);
//Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
//this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: [],
showTooltips: true
}
var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);
用于处理单一数据集解决方案的现有JS Fiddle:http://jsfiddle.net/5gyfykka/14/
我设法使用不同的onAnimationComplete函数来使用How to display Line Chart dataset point labels with Chart.js?
onAnimationComplete: function () {
var ctx = document.getElementById("LineWithLine").getContext("2d");
ctx.font = '.8rem "Gotham Book",sans-serif';
ctx.fontWeight = 'bold';
ctx.fillStyle = '#000';
ctx.textAlign="right";
var self = this;
$(self.datasets).each(function(idx,dataset){
$(dataset.points).each(function(pdx,pointinfo){
if ( pointinfo.value !== null ) {
ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 18);
}
});
});
},
虽然这有效,但它并不像Chart JS提供的多工具提示那么好 .
1 回答
您需要控制tootip生成过程(即从Chart.js库中复制粘贴代码的相关部分:-))
为多系列折线图自动显示工具提示(无悬停)
这是它的外观
只需更改这样的选项即可
小提琴 - https://jsfiddle.net/racqd639/