用户可以为图表的宽度和高度设置百分比值,用来替代绝对的像素值。
以百分比的方式调整图表,首先需要更新HTML代码，如下所示:
<div id="chartContainer" style="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>