我有一个使用Angular应用程序上运行的chart.js 2.8版创建的图表。我需要默认情况下工具提示在图表上始终可见，而不仅仅是鼠标悬停在这些点上时（图表是散点图）。我已经研究了如何进行设置，大多数资料似乎都建议使用pluginService注册一个修复程序以启用这种可能性。但是，chart.config.options.showAllTooltips必须已经存在，而在chart.js v2.8中似乎不再存在。
this.LQChart = new Chart(this.myChart, {
type: 'bubble',
data: {
labels:['Jobs']
}, options: {
plugins:{
colorschemes: {
scheme: 'brewer.YlOrBr9'
},
zoom:{
pan: {
enabled: true,
mode: 'xy',
rangeMin: {
x: null,
y: null
},
rangeMax:{
x: null,
y: null
}
},
zoom:{
enabled: true,
drag: false,
mode:'xy',
rangeMin: {
x: null,
y: null
},
rangeMax:{
x: null,
y: null
},
speed:0.1
}
},
// datalabels: {
// color: 'white',
// font: {
// weight:'bold'
// },
// display: function (context) {
// console.log("Algo: "+context);
// return context.dataset.data[context.dataIndex] > 15;
// },
// formatter: function(value, context) {
// console.log("Forma: "+value+" : "+context);
// return context.dataIndex + ':' + Math.round(value*100) + '%';
// }
// }
}, tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
return label
}
}
},legend: {
display: false
}, title: {
display: true,
text: 'Location Quotient of Jobs in Region'
}, scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: "# of Jobs"
},
id:'y-axis-0',
type:'linear',
gridLines: {
display:true
},
ticks: {
callback: function(value, index, values) {
return Number(value.toString());
}
},
position:'left'
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: "LQ"
},
id: 'x-axis-0',
type: 'linear',
position: 'bottom',
}]
}, annotation: {
annotations: [{
borderColor: 'black',
//borderDash: [2, 2],
borderWidth: 2,
mode: 'vertical',
type: 'line',
value: 1.0,
scaleID: 'x-axis-0'
}]
}
}
});
这是我用来创建图表的代码，我只需要知道如何将图表工具提示设置为始终可见。
答案 0 :(得分：1)
ChartJs V2中有很多有关此问题的讨论，您可以找到here，here和here。
总体而言，您需要做的是为ChartJs注册自己的插件，然后可以通过options属性使用它。
因此，如果您添加以下插件注册：
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
})
然后，您可以像这样在showAllTooltips中添加options属性：
options: {
showAllTooltips: true
...
看看this代码示例和一些示例数据。
答案 1 :(得分：0)
Viqas绝对给了我正确的答案，但我想修改以下内容： 如果有人遇到与我在pluginService.register代码中引发各种错误的问题相同的问题，我想在修改后在此处发布我的注册代码：
Chart.pluginService.register({
beforeRender: function (chart) {
if (chart.config.options['showAllTooltips']) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart['pluginTooltips'] = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart['pluginTooltips'].push(new (Chart as any).Tooltip({
_chart: chart['chart'],
_chartInstance: chart,
_data: chart.data,
_options: chart['options']['tooltips'],
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart['options']['tooltips']['enabled'] = false;
}
},
afterDraw: function (chart, easing: any) {
if (chart.config.options['showAllTooltips']) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart['allTooltipsOnce']) {
if (easing !== 1)
return;
chart['allTooltipsOnce'] = true;
}
// turn on tooltips
chart['options']['tooltips']['enabled'] = true;
Chart.helpers.each(chart['pluginTooltips'], function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart['options']['tooltips']['enabled'] = false;
}
}
})
这对我有用，我希望遇到同一问题的其他人也会有所帮助。