Highcharts 允許您將圖表渲染到特定容器中，而不是默認(rèn)的 DOM 容器。本文檔將介紹如何使用 renderTo 選項(xiàng)實(shí)現(xiàn)這一點(diǎn)。

使用 renderTo 選項(xiàng)

使用 renderTo 選項(xiàng)，指定您希望圖表渲染到的容器的 ID。您可以使用以下語(yǔ)法：

Highcharts.chart({renderTo: 'container-id',// 其他圖表選項(xiàng)...});

其中， container-id 是您想要渲染圖表到的容器的 ID。

示例

以下示例演示了如何使用 renderTo 選項(xiàng)將圖表渲染到特定容器中：

Highcharts.chart({renderTo: 'container',series: [{data: [1, 2, 3, 4, 5, 6, 7, 8, 9]}]});

使用 HTML 容器

您還可以使用 HTML 容器來(lái)渲染圖表。這可以通過(guò)創(chuàng)建一個(gè)具有指定 ID 的 div 元素并使用 renderTo 選項(xiàng)將其傳遞給 Highcharts 來(lái)實(shí)現(xiàn)：

絕對(duì)和相對(duì) URL

如果您使用絕對(duì) URL 引用圖表容器，您需要確保該 URL 在所有瀏覽器和設(shè)備上都能訪問(wèn)。如果您使用相對(duì) URL，則它將相對(duì)于 HTML 頁(yè)面所在的位置進(jìn)行解析。

銷毀圖表

如果您不再需要圖表，您可以通過(guò)調(diào)用 chart.destroy() 方法來(lái)銷毀圖表。這將從 DOM 中移除圖表容器并釋放其占用的資源。

結(jié)論

使用 renderTo 選項(xiàng)，您可以將圖表渲染到特定容器中，從而提供更多的靈活性并允許您將圖表集成到自定義布局中。

---

---

相關(guān)標(biāo)簽： RenderTo、 將圖表渲染到特定容器、 rendered、

上一篇：RenderToJavaScriptAPI中的圖表渲染目標(biāo)ren

下一篇：PHPSmarty社區(qū)資源發(fā)現(xiàn)文檔論壇和支持