當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS图表工具FusionCharts调整图表百分比大小
生活随笔
收集整理的這篇文章主要介紹了
JS图表工具FusionCharts调整图表百分比大小
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
在使用FusionCharts的時候，用戶可以為圖表的寬度和高度設置百分比值,用來替代絕對的像素值。圖表將根據父容器元素自動調整其尺寸。讓我們來看看在HTML中這是如何實現的。以百分比的方式調整圖表,首先需要更新HTML代碼，如下所示:
<div id="chartContainer" style="width:800px;height:300px;">This text is replaced by the chart </div> <script type="text/javascript"><!--var myChart = new FusionCharts("Column3D.swf", "myChartId", "80%", "100%", "0", "1");myChart.setXMLUrl("Data.xml");myChart.render("chartContainer"); // --></script>在上面的代碼中,我們指定圖表的寬度為80%，高度為100%。id為——“chartContainer”的DIV是圖表的容器元素。 因此,它的寬度和高度會以百分比的方式從DIV的維度派生。
在上面的例子中,我們設置DIV的寬度為800像素的,高度為300像素。因此,圖的大小會自動變成800x300。如下所示:
動態調整圖表的特性
當父容器的大小發生改變時，FusionCharts可以動態地調整自身的大小。用戶只需要進行下面的操作:
- 設置圖表的大小比例
- 設置你的HTML圖表容器,這樣當瀏覽器調整或者變更時它的尺寸會動態變化
- 當容器元素發生改變時,圖表本身也會立即動態地調整。
在下面的示例中,我們創建了一個非常基本的示例,圖表會填滿整個web瀏覽器的空間,如果瀏覽器的大小發生改變或調整,圖表本身將做出相應的調整。
<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"><!-- var myChart = new FusionCharts("FusionCharts/Area2D.swf", "myChartId","100%", "100%", "0", "1"); myChart.setXMLUrl("LargeData.xml"); myChart.render("chartContainer"); // --></script></body> </html>轉載于:https://my.oschina.net/u/1163318/blog/163000
總結
以上是生活随笔為你收集整理的JS图表工具FusionCharts调整图表百分比大小的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 字符串表示的大整数相乘
- 下一篇： uploadify 附件上传