Chart.js – 甜甜圈总是显示工具提示？
使用Chart.js库时，我可以在我的页面上添加多个甜甜圈而不会出现问题。
http://www.chartjs.org/docs/#doughnut-pie-chart
但我无法找到一种始终显示工具提示的方法 – 不仅仅是将鼠标hover在甜甜圈上时。 有人知道这是否可行？
我今天遇到了同样的问题，通过添加onAnimationComplte和tooltipevents选项很容易解决。
onAnitmationComplete调用该方法来显示像hover事件一样的工具提示。 通常，您在tooltipevents中定义事件以显示工具提示，但我们需要删除它们并传递一个空数组。
注意:( http://www.chartjs.org/docs/#doughnut-pie-chart ）。
使用Javascript：
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); HTML：
示例数据：
var data = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1" }, { value: 100, color: "#FDB45C", highlight: "#FFC870" } ]
JSFiddle PIE： http ： //jsfiddle.net/5gyfykka/
JSFiddle BAR / LINE： http ： //jsfiddle.net/5gyfykka/14/
我扩展了Kapi的方法，所以当你将鼠标hover在它上面时，你仍然可以保持默认function，如颜色变化，当你将鼠标hover在一个部分上时，它将隐藏其余部分。 我觉得它看起来更好。
var options = { onAnimationComplete: function () { this.showTooltip(this.segments, true); }, } var ctx = document.getElementById("Chart").getContext("2d"); var myPieChart = new Chart(ctx).Pie(data, options); $("#Chart").on('mouseleave', function (){ myPieChart.showTooltip(myPieChart.segments, true); });
您可以通过编写支持ChartJS版本> 2.1.5的自己的插件来完成此操作。
在脚本中包含以下代码：
// Show tooltips always even the stats are zero 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; } } }); // Show tooltips always even the stats are zero
然后，只需在要显示所有可用工具提示的任何图表的选项中使用以下行。
showAllTooltips: true
下面给出了工作小提琴
// Show tooltips always even the stats are zero 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; } } }); // Show tooltips always even the stats are zero var canvas = $('#myCanvas2').get(0).getContext('2d'); var doughnutChart = new Chart(canvas, { type: 'doughnut', data: { labels: [ "Success", "Failure" ], datasets: [{ data: [45, 9], backgroundColor: [ "#1ABC9C", "#566573" ], hoverBackgroundColor: [ "#148F77", "#273746" ] }] }, options: { // In options, just use the following line to show all the tooltips showAllTooltips: true } });
如果有人试图隐藏某些段工具提示; 在tooltipTemplate中执行：
tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";
例如，此代码检查％值，仅显示高于8％的值以减少混乱
如果您只想显示一个工具提示，则必须使用此代码。 这是第一部分的优点。
chart.showTooltip([chart.segments[0]], true);
函数showTooltip仅接受第一个参数的二维数组。