老湿视频免费看,成人国产电影,在线观看午夜视频

JS圖表控件FusionCharts使用教程：調(diào)整圖表百分比大小

原創(chuàng)|使用教程|編輯：郝浩|2013-08-28 13:49:50.000|閱讀 2158 次

概述：在使用FusionCharts的時候，用戶可以為圖表的寬度和高度設(shè)置百分比值,用來替代絕對的像素值。圖表將根據(jù)父容器元素自動調(diào)整其尺寸。

相關(guān)鏈接：

在使用FusionCharts的時候，用戶可以為圖表的寬度和高度設(shè)置百分比值,用來替代絕對的像素值。圖表將根據(jù)父容器元素自動調(diào)整其尺寸。讓我們來看看在HTML中這是如何實現(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"><!--
    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的維度派生。

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

Flash圖表控件FusionCharts使用教程：調(diào)整圖表百分比大小

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

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

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

在下面的示例中,我們創(chuàng)建了一個非常基本的示例,圖表會填滿整個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"><!--                   
                        
      var myChart = new FusionCharts("FusionCharts/Area2D.swf", "myChartId",
                    "100%", "100%", "0", "1");       
      myChart.setXMLUrl("LargeData.xml");         
      myChart.render("chartContainer");                   
      // --></script>
  </body> 
</html>

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn

文章轉(zhuǎn)載自：慧都控件網(wǎng)

上一篇：TVideoGrabber教程：屏幕錄制下一篇：使用FastReport.Service.dll創(chuàng)建Web報表服務(wù)