javascript 将 HTML 标签添加到 Highcharts
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28970913/
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
Adding HTML label to Highcharts
提问by jperezov
I've seen the HighCharts Docs, and have also read this answer, but I don't know how to add HTML to the labels. I am trying to create a donut chart with the sum of the values in the middle.
我看过HighCharts Docs，也看过这个答案，但我不知道如何将 HTML 添加到标签。我正在尝试使用中间值的总和创建一个圆环图。
For some reason, this works (Example A):
出于某种原因，这有效（示例 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
});
}
But this does not (Example B):
但这不是（示例 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
});
}
I've tried setting useHTMLto true:
我试过设置useHTML为true：
var chartOptions = {
chart: { ... },
labels: {
useHTML: true,
}
...
}
But to no avail. Also, the reason Example A"works" is that it's creating multiple <tspan>elements. Here's the inspect-element on the result from Example A:
但无济于事。此外，示例 A“有效”的原因是它正在创建多个<tspan>元素。这是示例 A 中结果的检查元素：
<tspan>Pie 2</tspan>
<tspan>100</tspan>
I'd really prefer to get this to use HTML if possible, since that's just easier to style for me, but I alsoneed this to be part of the chart, since I need it to interact and change with the chart.
如果可能的话，我真的更喜欢让它使用 HTML，因为这对我来说更容易设计样式，但我也需要它成为图表的一部分，因为我需要它与图表进行交互和更改。
EDIT:
编辑：
Here's the fiddle. Click on any of the pie slices to see the effect I'm trying to achieve.
这是小提琴。单击任何饼图以查看我想要达到的效果。
回答by Pawe? Fus
Always, when using some inner methods from Highcharts, read how to use them, from the source code:
始终，在使用 Highcharts 中的某些内部方法时，请从源代码中阅读如何使用它们：
label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)
As you can see label()method has more options, not just only text/x/y;)
正如你所看到的label()方法有更多的选择，而不是仅仅只text/ x/ y）
Working example for you: http://jsfiddle.net/Q6yQs/57/, where useHTMLis set to true.
您的工作示例：http: //jsfiddle.net/Q6yQs/57/，其中useHTML设置为 true。
