Highchart pie -设置useHTML=true时无法选择数据标签
Highchart pie -设置useHTML=true时无法选择数据标签
提问于 2015-02-05 16:36:25
当我在饼图数据标签上设置useHTML=true时，标签不响应鼠标悬停并且不显示工具提示
http://jsfiddle.net/wh4mw0o7/
$(function () {
$('#container').highcharts({
chart: {},
plotOptions: {
pie: {
dataLabels: {
useHTML:true, // <- THE PROBLEM !!!!!
}
}
},
series: [{
type: 'pie',
data: [
['AAA', 10],
['BBB', 20],
['CCC', 15]
]
}]
});
});有人知道怎么修吗？我在标签中使用html (不同的大小和颜色，所以我必须使用html作为标签)。
回答 2
Stack Overflow用户
发布于 2015-02-05 22:06:55
参见http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting和段落“缺点是，它将始终放置在所有其他SVG内容之上，并且它在导出的图表中的呈现方式不同”。这意味着HTML元素在SVG之下，SVG保存事件。
相关主题：https://github.com/highslide-software/highcharts.com/issues/2158
编辑：
$.each(chart.series[0].data, function (i, d) {
$('.highcharts-data-labels div span').eq(i).mouseover(function (e) {
chart.tooltip.refresh(d);
});
});解决方法：http://jsfiddle.net/wh4mw0o7/6/
Stack Overflow用户
发布于 2015-02-05 22:59:37
作为一种解决方案，您可以调用饼图的每个部分的覆盖。
dataLabels: {
useHTML:true, // Make our labels HTML
formatter: function() { // Wrap the text of each label with a span tag
// Id of the span is equal to 'label-<Name of your label>'
return "<span id='label-" + this.point.name+ "'>" +
this.point.name + // And draw the label itself inside the span
"</span>";
}
}在您的图表选项下面编写事件处理程序：
// On the hover event of each label we can manually call the hover of
// each segment of your pie chart
$('#label-AAA').hover(
// When the mouse pointer enters the label, make it hovered and show its tooltip
function() {
// data[0] - AAA segment of the chart
mychart.series[0].data[0].setState('hover');
// Refresh the tooltip of this segment
mychart.tooltip.refresh(mychart.series[0].points[0]);
},
function() { // When the mouse pointer leaves the label
mychart.tooltip.hide();
}); 对于每个标签，代码都是相同的。这种方法的缺点是您必须事先知道所有标签的名称。这是JSFiddle：http://jsfiddle.net/wh4mw0o7/4/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28339456
复制相关文章
相似问题
腾讯云开发者
