首頁  >  文章  >  後端開發  >  FusionCharts 2D長條圖和折線圖的組合圖

FusionCharts 2D長條圖和折線圖的組合圖

黄舟
黄舟原創
2017-02-15 15:19:131870瀏覽

1、設計思路

(1)了解組合圖的特性以及用法,選用圖的類型;

(2)設計出兩根柱子和兩根折線,分開展示。

2、設計步驟

(1)設計頁

Column2DLine.html:

columnLine .xml:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>FuionCharts 2D柱状图和折线图组合图</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../scripts/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="../scripts/Charts/FusionCharts.js"></script>
    <script type="text/javascript">
        $(function(){
              var column2DLine = new FusionCharts( "../scripts/Charts/MSCombi2D.swf", "doubleAreaId", "100%", "540", "0" );
      		  column2DLine.setXMLUrl("data/columnLine.xml");
              column2DLine.render("columnLine");
        });
    </script>

  </head>
  
  <body>
    <p id="columnLine"></p>
  </body>
</html>

3、設計結果

ts 的內容,更多相關內容請關注PHP中文網(www.php.cn)!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn