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

Highcharts: How to add HTML inside of chart area

提问by Bo.

Is it possible to add custom HTML (e.g. div) inside of chart area (inside of border; Highcharts Rendererdoes not seem to offer this option)? If yes how would one go about doing this?

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

Any help is appreciated.

任何帮助表示赞赏。

采纳答案by Pawe? Fus

Edit:

编辑：

In the latests versions (v4 at least) in Renderer APImethods useHTMLargument was added, for example renderer.text(str, x, y, useHTML)- which will render elements as HTML and position them correctly. Of course simple shapes (rect, pathetc.) are always rendered in SVG/VML.

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

Extra note: For HTMLelements, to see them on exported chart, don't forget to set exporting.allowHTML.

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

Old answer:

旧答案：

Renderer is to render elements on SVG/VML. If you want to add HTML tags, add them the same way as is done in Highcharts - position:absolute and set left/top values to put this inside container.

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

回答by Rahul Gupta

You will have to use Highcharts Renderer API.

您将不得不使用Highcharts Renderer API。

You can refer this JSFIDDLE working demo

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

it works like:

它的工作原理如下：

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

});

回答by art

you can refer in this website . http://pmsipilot.github.io/jquery-highchartTable-plugin/#demo

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

Hope it will help.

希望它会有所帮助。