向Highcharts添加HTML标签

Question

我看过HighCharts Docs，也看到过read this answer，但我不知道如何在标签上添加HTML。我正在尝试用中间值的总和创建一个甜甜圈图。

出于某种原因，这可行（示例A）：

var text = this.name + '<br>' + this.y ;
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

但这不是（示例B）：

var text = '<div><h2>' + this.name + '</h2><p>' + this.y + '</p></div>';
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

我尝试将useHTML设置为true：

var chartOptions = {
    chart: { ... },
    labels: {
        useHTML: true,
    }
    ...
}

但无济于事。同样，示例A“有效”的原因是它正在创建多个<tspan>元素。这是对示例A：

中的结果的检查元素

<tspan>Pie 2</tspan>
<tspan>100</tspan>

我真的更愿意在可能的情况下使用HTML，因为这对我来说更容易设置样式，但是我also需要将此作为图表的一部分，因为我需要它与之交互和更改图表。

编辑：

Here's the fiddle。单击任何一个饼图，查看我要达到的效果。

Answer 1

总是使用Highcharts的内部方法时，请从源代码中阅读如何使用它们：

 label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)

如您所见，label()方法有更多选项，不仅是text /x/ y;）

适合您的工作示例：http://jsfiddle.net/Q6yQs/57/，其中useHTML设置为true。