Highcharts：如何在图表区域内添加 HTML答案

【问题标题】：Highcharts: How to add HTML inside of chart areaHighcharts：如何在图表区域内添加 HTML
【发布时间】：2013-07-18 13:48:50
【问题描述】：

是否可以在图表区域内（边框内；Highcharts Renderer 似乎不提供此选项）添加自定义 HTML（例如 div）？如果是的话，人们将如何去做呢？

感谢任何帮助。

【问题讨论】：

渲染器是在SVG/VML上渲染元素。如果要添加 HTML 标记，请以与 Highcharts 中相同的方式添加它们 - position:absolute 并设置 left/top 值以将其放入容器中。
@PawełFus：您能否将您的 cmets 作为答案，以便我接受。非常感谢您的帮助（答案很简单）。

标签： javascript jquery graph charts highcharts

【解决方案1】：

您必须使用 Highcharts Renderer API。

你可以参考这个JSFIDDLE working demo

它的工作原理是：

var chart = new Highcharts.Chart({
....
.....
......
}, function(chart) { // on complete

    chart.renderer.text('This text is <span style="color: red">styled</span> and <a href="http://example.com">linked</a>', 150, 80)
        .css({
            color: '#4572A7',
            fontSize: '16px'
        })
        .add();

});

【讨论】：

在我到这里之前不知道渲染器，对我来说它有效，因为我只需要向图表添加一个文本链接。
是否可以更新文本的位置，例如通过 css 将其拉下 400 像素，因为它必须在文本函数中？

【解决方案2】：

编辑：

在Renderer API 方法中的最新版本（至少v4）中添加了useHTML 参数，例如renderer.text(str, x, y, useHTML) - 它将元素呈现为HTML 并正确定位它们。当然，简单的形状（rect、path 等）总是以 SVG/VML 呈现。

额外说明：对于HTML 元素，要在导出的图表上查看它们，不要忘记设置exporting.allowHTML。

旧答案：

渲染器是在 SVG/VML 上渲染元素。如果你想添加 HTML 标签，添加它们的方式与在 Highcharts 中所做的相同 - position:absolute 并设置 left/top 值以将其放入容器中。

【讨论】：

如果您使用图表导出功能，以这种方式添加的内容将不会被导出。这可能是也可能不是您想要的。如果您希望将其导出，请使用 Rahul Gupta 的回答。
好点！在旧版本的 Renderer 中，我们只能添加 SVG/VML 元素（不是 HTML——这是这个问题的重点）。我不记得确切的版本，但 useHTML 选项已添加到渲染器的某些 API 方法中，例如 renderer.text(str, x, y [, useHTML])、API。

【解决方案3】：

你可以参考这个网站。 http://pmsipilot.github.io/jquery-highchartTable-plugin/#demo

希望它会有所帮助。

【讨论】：