javascript - Highcharts：如何在图表区域内添加 HTML

Question

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

任何帮助表示赞赏。

Answer 1

您将不得不使用Highcharts Renderer API。

你可以参考这个JSFIDDLE 工作演示

它的工作原理如下：

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();

});

Answer 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 值以将其放入容器中。

Answer 3

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

希望它会有所帮助。