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>