FusionCharts使用XML和JSON数据源示例



FusionCharts使用XML和JSON数据源示例。

上篇文章简单对FushionCharts进行了介绍，这篇文章通过具体例子来介绍FushionCharts使用XML和JSON数据源的方式。

使用FushionCharts的步骤很简单，只需要将使用的swf文件和fushionCharts.js拷贝到项目中即可,不需要任何jar包.每个swf文件对应一种图样,例如2D柱形图和3D柱形图分别对应了两个swf文件.

FushionCharts的使用原理很简单,每种图例都已经做好了原型,我们要做的就是传入原型对应的数据,然后调用FushionCharts.js的方法进行创建即可.

看具体的jsp:

  1. <%@ page language=”java” contentType=”text/html; charset=GB18030″
  2.     pageEncoding=”GB18030″ %>
  3. <html>
  4. <head>
  5.    <base href=”<%=basePath%>”>
  6.         <meta http-equiv=”Content-Type” content=”text/html; charset=GBK”>
  7.         <title></title>
  8.         <link href=”js/style.css” rel=”stylesheet” type=”text/css” />
  9.         <link href=”js/prettify.css” rel=”stylesheet” type=”text/css” />
  10.         <script type=”text/javascript” src=”js/fusionCharts/FusionCharts.js”></script>
  11.         <script type=”text/javascript” src=”js/jquery-1.4.2.min.js”></script>
  12.         <script type=”text/javascript” src=”js/prettify.js”></script>
  13.         <script type=”text/javascript” src=”js/json2.js”></script>
  16. </head>
  17. <body>
  18.         <table width=”100%”>
  19.             <tr>
  20.                 <td><div id=”2DCoulmn” align=”center”>2D柱形图</div></td>
  21.                 <td><div id=”MSLine” align=”center”>多维线形图</div></td>
  22.             </tr>
  23.             <tr>
  24.                 <td><div id=”AngularGauge” align=”center”>仪表盘</div></td>
  25.             </tr>
  26.         </table>
  28.         <script type=”text/javascript”>
  30.     //使用XMLUrl方式,需要将写好的数据XML文件放到指定位置
  31.         var  MS2dColumn = new FusionCharts(“flex/fusioncharts/MSColumn2D.swf”, ”MS2DColumnID”, ”460″, ”350″, ”0″, ”1″);
  32.         MS2dColumn.setXMLUrl(“../flex/data/XML/Col2D1.xml”);
  33.     //绑定到指定控件
  34.         MS2dColumn.render(“2DCoulmn”);
  37.         //使用json数据
  38.         var  MSLine = new FusionCharts(“flex/fusioncharts/MSLine.swf”, ”MSLineID”, ”460″, ”350″, ”0″, ”1″);   MSLine.setJSONData({
  39.              ”chart”:{
  40.                     ”caption”:”Business Results 2005 v 2006″,
  41.                     ”xaxisname”:”Month”,
  42.                     ”yaxisname”:”Revenue”,
  43.                     ”showvalues”:”0″,
  44.                     ”numberprefix”:”$”  },
  45.              ”categories”:[{
  46.                  "category":[
  47.                                  {          "label":"Jan"        },
  48.                                  {          "label":"Feb"        },
  49.                                  {          "label":"Mar"        },
  50.                                  {          "label":"Apr"        },
  51.                                  {          "label":"May"        },
  52.                                  {          "label":"Jun"        },
  53.                                  {          "label":"Jul"        },
  54.                                  {          "label":"Aug"        },
  55.                                  {          "label":"Sep"        },
  56.                                  {          "label":"Oct"        },
  57.                                  {          "label":"Nov"        },
  58.                                  {          "label":"Dec"        }]
  59.                }
  60.                ],
  61.              ”dataset”:[
  62.                           {
  63.                               "seriesname":"2006",
  64.                               "data":[
  65.                                      {          "value":"27400"        },
  66.                                      {          "value":"29800"        },
  67.                                      {          "value":"25800"        },
  68.                                      {          "value":"26800"        },
  69.                                      {          "value":"29600"        },
  70.                                      {          "value":"32600"        },
  71.                                      {          "value":"31800"        },
  72.                                      {          "value":"36700"        },
  73.                                      {          "value":"29700"        },
  74.                                      {          "value":"31900"        },
  75.                                      {          "value":"34800"        },
  76.                                      {          "value":"24800"        }      ]    },
  77.                            {   ”seriesname”:”2007″,
  78.                                ”data”:[
  79.                                      {          "value":"27900"        },
  80.                                      {          "value":"29800"        },
  81.                                      {          "value":"15800"        },
  82.                                      {          "value":"24800"        },
  83.                                      {          "value":"19600"        },
  84.                                      {          "value":"32600"        },
  85.                                      {          "value":"35800"        },
  86.                                      {          "value":"31700"        },
  87.                                      {          "value":"39700"        },
  88.                                      {          "value":"51900"        },
  89.                                      {          "value":"14800"        },
  90.                                      {          "value":"20800"        }      ]    },
  91.                            {   ”seriesname”:”2005″,
  92.                                ”data”:[{        "value":"10000"        },
  93.                                      {          "value":"11500"        },
  94.                                      {          "value":"12500"        },
  95.                                      {          "value":"15000"        },
  96.                                      {          "value":"11000"        },
  97.                                      {          "value":"9800"         },
  98.                                      {          "value":"11800"        },
  99.                                      {          "value":"19700"        },
  100.                                      {          "value":"21700"        },
  101.                                      {          "value":"21900"        },
  102.                                      {          "value":"22900"        },
  103.                                      {          "value":"20800"        }      ]    }  ],
  104.                     ”trendlines”:{
  105.                        ”line”:[{        "startvalue":"26000",
  106.                                         "color":"91C728",
  107.                                         "displayvalue":"Target",
  108.                                         "showontop":"1"
  109.                        }]
  110.                      },
  111.                     ”styles”:[{
  112.                        "definition":[{
  113.                                "style":[{          "name":"CanvasAnim",
  114.                                                    "type":"animation",
  115.                                                    "param":"_xScale",
  116.                                                    "start":"0",
  117.                                                    "duration":"1"
  118.                                         }]
  119.                        }],
  120.                     ”application”:[{
  121.                                "apply":[{         "toobject":"Canvas",
  122.                                                   "styles":"CanvasAnim"
  123.                                          }]
  124.                        }]
  125.                      }]
  126.             });
  129.     //使用xml数据
  130.     var AngularGauge = new FusionCharts(“<%=request.getContextPath()%>/flex/fusioncharts/AngularGauge.swf”, ”仪表盘”, ”300″, ”300″, ”0″, ”1″);
  132.     var xmlDate= ”<chart bgAlpha=’0′ bgColor=’000000′ lowerLimit=’0′ upperLimit=’100′ numberSuffix=’%25′ showBorder=’0′ basefontColor=’000000′ chartTopMargin=’25′ chartBottomMargin=’25′ chartLeftMargin=’25′ chartRightMargin=’25′ toolTipBgColor=’80A905′ gaugeFillMix=’{dark-10},FFFFFF,{dark-10}’ gaugeFillRatio=’3′> <colorRange>  <color minValue=’0′ maxValue=’45′ code=’8BBA00′/>  <color minValue=’45′ maxValue=’80′ code=’F6BD0F’/>   <color minValue=’80′ maxValue=’100′ code=’FF654F’/></colorRange><dials><dial value=’50′ rearExtension=’10′/></dials><trendpoints><point value=’50′ displayValue=’Average’ fontcolor=’FF4400′ useMarker=’1′ dashed=’1′ dashLen=’2′ dashGap=’2′ valueInside=’1′ /></trendpoints><annotations><annotationGroup id=’Grp1′ showBelow=’1′ ><annotation type=’rectangle’ x=’0′ y=’0′ toX=’445′ toY=’225′ radius=’0′ color=’E6F7F7′ showBorder=’0′ /></annotationGroup></annotations><styles> <definition>  <style name=’RectShadow’ type=’shadow’ strength=’3′/> </definition><application><apply toObject=’Grp1′ styles=’RectShadow’ />    </application>   </styles>  </chart> ”;
  134.     AngularGauge.setXMLData(xmlDate);
  135.     AngularGauge.render(“AngularGauge”);
  138.       </script>
  141. </body>
  142. </html>

FusionCharts支持直接使用文件数据,也支持直接将数据写到文件里,可根据自己数据的情况来选择合适的方式.

 

比较常用的还是JSON方式,因为后台从数据库取出的数据LIST,可以直接转为JSON格式传到前台界面,然后使用setJSONData推送到Chart中,这里就不详细介绍.具体使用者有问题可以与我交流.