當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS图表工具FusionCharts调整图表百分比大小

發(fā)布時(shí)間：2025/4/5 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS图表工具FusionCharts调整图表百分比大小小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

在使用FusionCharts的時(shí)候，用戶可以為圖表的寬度和高度設(shè)置百分比值,用來替代絕對(duì)的像素值。圖表將根據(jù)父容器元素自動(dòng)調(diào)整其尺寸。讓我們來看看在HTML中這是如何實(shí)現(xiàn)的。

以百分比的方式調(diào)整圖表,首先需要更新HTML代碼，如下所示:

<div id="chartContainer" style="width:800px;height:300px;">This text is replaced by the chart </div> <script type="text/javascript"></script>

在上面的代碼中,我們指定圖表的寬度為80%，高度為100%。id為——“chartContainer”的DIV是圖表的容器元素。因此,它的寬度和高度會(huì)以百分比的方式從DIV的維度派生。

在上面的例子中,我們?cè)O(shè)置DIV的寬度為800像素的,高度為300像素。因此,圖的大小會(huì)自動(dòng)變成800x300。如下所示:

動(dòng)態(tài)調(diào)整圖表的特性

當(dāng)父容器的大小發(fā)生改變時(shí)，FusionCharts可以動(dòng)態(tài)地調(diào)整自身的大小。用戶只需要進(jìn)行下面的操作:

設(shè)置圖表的大小比例
設(shè)置你的HTML圖表容器,這樣當(dāng)瀏覽器調(diào)整或者變更時(shí)它的尺寸會(huì)動(dòng)態(tài)變化
當(dāng)容器元素發(fā)生改變時(shí),圖表本身也會(huì)立即動(dòng)態(tài)地調(diào)整。

在下面的示例中,我們創(chuàng)建了一個(gè)非常基本的示例,圖表會(huì)填滿整個(gè)web瀏覽器的空間,如果瀏覽器的大小發(fā)生改變或調(diào)整,圖表本身將做出相應(yīng)的調(diào)整。

<html><head> <title>My First chart using FusionCharts - Using dynamically resizable chart</title><script type="text/javascript" src="FusionCharts/FusionCharts.js"></script> </head> <body style="height:100%;"> <div id="chartContainer" style="height:100%;" >FusionCharts will load here</div> <script type="text/javascript"></script></body> </html>

轉(zhuǎn)載于:https://my.oschina.net/u/1163318/blog/163000

總結(jié)

以上是生活随笔為你收集整理的JS图表工具FusionCharts调整图表百分比大小的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。