JS圖表工具FusionCharts調整圖表百分比大小

時間 2019-11-12

標籤圖表工具 fusioncharts 調整百分比大小欄目 JavaScript 简体版

原文原文鏈接

在使用FusionCharts的時候，用戶能夠爲圖表的寬度和高度設置百分比值,用來替代絕對的像素值。圖表將根據父容器元素自動調整其尺寸。讓咱們來看看在HTML中這是如何實現的。

以百分比的方式調整圖表,首先須要更新HTML代碼，以下所示: javascript

<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的維度派生。 html

在上面的例子中,咱們設置DIV的寬度爲800像素的,高度爲300像素。所以,圖的大小會自動變成800x300。以下所示: java

動態調整圖表的特性 web

當父容器的大小發生改變時，FusionCharts能夠動態地調整自身的大小。用戶只須要進行下面的操做: 瀏覽器

設置圖表的大小比例
設置你的HTML圖表容器,這樣當瀏覽器調整或者變動時它的尺寸會動態變化
當容器元素髮生改變時,圖表自己也會當即動態地調整。

在下面的示例中,咱們建立了一個很是基本的示例,圖表會填滿整個web瀏覽器的空間,若是瀏覽器的大小發生改變或調整,圖表自己將作出相應的調整。 code

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。