JS图表控件FusionCharts使用教程:调整图表百分比大小

在使用FusionCharts的时候,用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。图表将根据父容器元素自动调整其尺寸。让我们来看看在HTML中这是如何实现的。

》》》免费下载FusionCharts最新版

以百分比的方式调整图表,首先需要更新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。如下所示:

Flash图表控件FusionCharts使用教程:调整图表百分比大小

动态调整图表的特性

当父容器的大小发生改变时,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>

 

你可能感兴趣的:(JS图表控件FusionCharts使用教程:调整图表百分比大小)