Flash图表控件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。如下所示:

动态调整图表的特性

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

FusionCharts V3.2.2版本免费下载

巴特西

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

最新文章

热门文章