jQuery Chart.js - 甜甜圈总是显示工具提示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25661197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart.js - Doughnut show tooltips always?
提问by Taapo
When using the Chart.js library, I can add multiple doughnuts on my page without a problem.
使用 Chart.js 库时，我可以毫无问题地在我的页面上添加多个甜甜圈。
http://www.chartjs.org/docs/#doughnut-pie-chart
http://www.chartjs.org/docs/#doughnut-pie-chart
But I cannot find a way to always showthe tooltips - not only when hovering the mouse over the doughnut. Does anybody know if this is possible?
但是我找不到始终显示工具提示的方法 - 不仅是在将鼠标悬停在甜甜圈上时。有谁知道这是否可能？
回答by Kapi
I had the same problem today and solved it quite easy by adding the options onAnimationComplte and tooltipevents.
我今天遇到了同样的问题，通过添加 onAnimationComplte 和 tooltipevents 选项很容易地解决了它。
onAnitmationComplete calls the method to show the tooltips like a hover event does. Normally you define the events in tooltipevents to display the tooltips but we need to remove them and pass an empty array.
onAnitmationComplete 调用该方法以像悬停事件一样显示工具提示。通常你在 tooltipevents 中定义事件来显示工具提示，但我们需要删除它们并传递一个空数组。
Note:(http://www.chartjs.org/docs/#doughnut-pie-chart).
注意：（http://www.chartjs.org/docs/#doughnut-pie-chart）。
Javascript:
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:
HTML：
<div id="chartContainer">
<canvas id="chart" width="200" height="200"></canvas>
</div>
Example Data:
示例数据：
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 PIE：http: //jsfiddle.net/5gyfykka/
JSFiddle BAR/LINE: http://jsfiddle.net/5gyfykka/14/
JSFiddle 酒吧/行：http: //jsfiddle.net/5gyfykka/14/
回答by Suhaib Janjua
You can do this by writing your own plugin which supports ChartJS version > 2.1.5.
您可以通过编写自己的插件来实现这一点，该插件支持 ChartJS 版本 > 2.1.5。
Include the following code in your script:
在脚本中包含以下代码：
// 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
And then just use the following line in the options of any chart on which you want to show all the tooltips available.
然后只需在要显示所有可用工具提示的任何图表的选项中使用以下行。
showAllTooltips: true
Working Fiddle is given below
下面给出了工作小提琴
// 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
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<canvas id="myCanvas2" width="350" height="296"></canvas>
</div>Working JSFIDDLE here.
在这里工作 JSFIDDLE。
回答by Indy411
I expanded on Kapi's method so when you hover over it you still get to keep the default functionality like color change, and when you hover over a section it will hide the rest. I think it looks better.
我扩展了 Kapi 的方法，因此当您将鼠标悬停在它上面时，您仍然可以保留默认功能，例如颜色更改，而当您将鼠标悬停在某个部分上时，它将隐藏其余部分。我觉得它看起来更好。
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);
});
回答by ardavar
In case someone tries to hide some of the segment tooltips; do it in the tooltipTemplate:
如果有人试图隐藏某些段工具提示；在工具提示模板中执行此操作：
tooltipTemplate : "<% var percentage = Math.round(circumference / 6.283 * 100); if (percentage >8)%><%= percentage %>%";
for example this code checks for the %value and only displays values higher than 8% to decrease clutter
例如，此代码检查 %value 并仅显示高于 8% 的值以减少混乱
回答by Jan ?afránek
If you want to display just ONE tooltip, you have to use this code. Here is exaple for first segment.
如果您只想显示一个工具提示，则必须使用此代码。这是第一段的示例。
chart.showTooltip([chart.segments[0]], true);
Function showTooltip only accepts 2 dimensional arrays for first parameter.
函数 showTooltip 只接受第一个参数的二维数组。
