Flash图表控件FusionCharts调整图表百分比大小

发布时间：2020-12-15 17:57:23 所属栏目：百科来源：网络整理

导读：用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。以百分比的方式调整图表,首先需要更新HTML代码，如下所示: div id="chartContainer" style="width:800px;height:300px;" This text is replaced by the chart/divscript type="text/javascri

用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。

以百分比的方式调整图表,首先需要更新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","1");       
      myChart.setXMLUrl("LargeData.xml");         
      myChart.render("chartContainer");                   
      // --></script>
  </body> 
</html>

FusionCharts V3.2.2版本免费下载

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!