Javascript 如何在 jqplot 饼图上显示工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8209474/
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
How to display tooltips on jqplot pie chart
提问by emt14
I have a jqplot pie chart with a legend and I would like to get the legend text to appear as a tooltip when the mouse hovers on the pies. I'm not sure how to do that. Does anyone have any experience doing similar?
我有一个带有图例的 jqplot 饼图，当鼠标悬停在饼图上时，我想让图例文本显示为工具提示。我不知道该怎么做。有没有人有做类似的经验？
example code:
示例代码：
$(document).ready(function(){
var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],['Out of home', 16],['Commuting', 7], ['Orientation', 9]];
var plot1 = jQuery.jqplot ('chart1', [data],
{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true
}
},
legend: { show:true, location: 'e' }
}
);
});
回答by Srinidhi
I'm using the latest version of jqPlot and got the tooltips to work by just using the following inside "seriesDefaults" section:
我正在使用最新版本的 jqPlot 并通过使用“seriesDefaults”部分中的以下内容来使工具提示起作用：
highlighter: {
show: true,
formatString:'%s',
tooltipLocation:'sw',
useAxesFormatters:false
}
The important part is "useAxesFormatters: false" since there are no axes in a pie chart. Feel free to change the "formatString" to whatever it is you want to, but for me, just "%s" shows the exact same string which shows up in the legends.
重要的部分是“useAxesFormatters: false”，因为饼图中没有轴。随意将“formatString”更改为您想要的任何内容，但对我而言，只是“%s”显示与图例中显示的字符串完全相同的字符串。
回答by Koby Mizrahy
You need to bind the jqplot data highligh and unhighligh events, grab the data you want to show and set the chart containing div's title attribute.
需要绑定jqplot数据highligh和unhighligh事件，抓取要显示的数据，设置包含div的title属性的图表。
The following code shows the title in the format of "x: y", where x is the legend label and y is the value:
以下代码以“x:y”格式显示标题，其中 x 是图例标签，y 是值：
var plot = $.jqplot('plotDivId',...);
$("#plotDivId").bind('jqplotDataHighlight', function(ev, seriesIndex, pointIndex, data) {
var $this = $(this);
$this.attr('title', data[0] + ": " + data[1]);
});
$("#plotDivId").bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
var $this = $(this);
$this.attr('title',"");
});
This piece of code is being used in my system which works with no problem.
这段代码正在我的系统中使用，它可以正常工作。
回答by Wagner Dias
I am using the version of the highlighter plugin on the following link:
我正在使用以下链接上的荧光笔插件版本：
https://github.com/tryolabs/jqplot-highlighter
https://github.com/tryolabs/jqplot-highlighter
The parameters I am using:
我使用的参数：
highlighter: {
show:true,
tooltipLocation: 'n',
tooltipAxes: 'pieref', // exclusive to this version
tooltipAxisX: 20, // exclusive to this version
tooltipAxisY: 20, // exclusive to this version
useAxesFormatters: false,
formatString:'%s, %P',
}
The new parameters ensure a fixed location where the tooltip will appear. I prefer to place it on the upper left corner to avoid problems with resizing the container div.
新参数确保工具提示出现的固定位置。我更喜欢将它放在左上角以避免调整容器 div 的大小时出现问题。
回答by Anders Jorsal
As I couldn't get the Highlighter to work - it did not display anything for me on the pie chart - I ended up with the solution to display a browser tooltip based on the highligter event.
由于我无法让荧光笔工作 - 它没有在饼图上为我显示任何内容 - 我最终得到了基于 highligter 事件显示浏览器工具提示的解决方案。
var plot1 = jQuery.jqplot ('chart1', [data], {
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer
}
}
);
$('#chart1').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) {
document.getElementById('chart1').title = data;
//alert('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
});
回答by Mark
I do not believe there is a built in for this. You'll need to bind handlers to the 'jqplotDataHighlight' and 'jqplotDataUnhighlight' events. See the example on the bottom of this page. This is doing it with bubble plots, but it should translate to pie plots as well.
我不相信有一个内置的。您需要将处理程序绑定到 'jqplotDataHighlight' 和 'jqplotDataUnhighlight' 事件。请参阅本页底部的示例。这是用气泡图来做的，但它也应该转化为饼图。
