Question

当我在pie数据标签上设置useHTML = true时，标签不响应鼠标悬停而不显示工具提示

 $(function () {
    $('#container').highcharts({
        chart: {},
        plotOptions: {
            pie: {
                dataLabels: {
                    useHTML:true, // <- THE PROBLEM !!!!!
                }
            }
        },
        series: [{
            type: 'pie',
            data: [
                ['AAA', 10],
                ['BBB', 20],
                ['CCC', 15]
            ]
        }]
    });
});

有人知道如何解决它吗？我在标签中使用html（不同的大小和颜色，所以我必须使用html作为标签）。

Answer 1

参见http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting 和段落“缺点是它将始终布置在所有其他SVG内容之上，并且在导出的图表中不会以相同的方式呈现。”这意味着HTML元素低于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/

Answer 2

作为解决方案，您可以调用饼图的每个部分。

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/

设置useHTML = true时，无法选择Highchart pie - datalabel

2 个答案: