将 HTML 标签添加到 Highcharts

Question

我看到了 HighCharts Docs, and have also 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,
    }
    ...
}

但无济于事。此外，Example A “有效”的原因是它创建了多个 <tspan> 元素。这是 Example A:

结果的检查元素

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

如果可能的话，我真的更愿意使用 HTML，因为这对我来说更容易设计风格，但我也需要它作为一部分图表，因为我需要它与图表进行交互和更改。

编辑：

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。

将 HTML 标签添加到 Highcharts

Adding HTML label to Highcharts

javascript

highcharts

编辑：