Highcharts:如何在图表区域内添加HTML

Question

是否可以在图表区域内添加自定义HTML(例如div)(在边框内部; Highcharts Renderer似乎不提供此选项)？如果是的话怎么会这样做呢？

任何帮助表示赞赏.

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和set left/top值将其放入容器中.