FusionCharts 案例

java程序運用表單報表的FusionCharts案例分析


<html>
  <head>
  <%--
  第一步:引入FusionCharts.js文件,
  第二步:定義一個div,它必須具備一個元素:id
 第三步:定義一個FusionCharts對象
 var chart = new FusionCahrts(param1,param2,param3,param4)
 param1 swf的路徑
 param2 定義一個id是不重名的swf名稱
 param3  高度
 param4 寬度
 第四步:設置數據文件
 第五步:指定圖形渲染位置
 char.render("chartId_01");
   --%>
  </head>
  <script type="text/javascript" src="/FusionCharts/Charts/FusionCharts.js"></script>
  <script type="text/javascript">
  window.onload = function (){
  var charts= new FusionCharts("/FusionCharts/Charts/Column3D.swf","swfId",600,500);
  charts.setDataURL("/FusionCharts/datas/Data1.xml");
  charts.render("chartId_01");
  }
 
  </script>
  <body bgcolor="#ffffff">  
  <div id="chartId_01"></div>
  </body>     

</html>







<chart baseFont='SunSim' baseFontSize='12' subcaption='' yAxisMinValue='0' yAxisMaxValue='100000'
hovercapbg='ffecaa' hovercapborder='f47e00' formatNumberScale='1' decimalPrecision='2' showNames='1' showValues='1' rotateNames='1' numdivlines='10' numVdivlines='10'
 xAxisName='月份' yAxisName='銷售個數' caption='2014年年度銷售情況統計分析'
useRoundEdges='1' bgColor='ffffff,ffffff' showBorder='5'>
<set name='一月' value='25000'/>
<set name='二月' value='25000'/>
<set label='三月' value='42300'/>
<set label='四月' value='35300'/>
<set label='五月' value='31300'/>
<set label='六月' value='25000'/>
<set label='七月' value='35000'/>
<set label='八月' value='42300'/>
<set label='九月' value='35300'/>
<set label='10月' value='31300'/>
<set label='11月' value='25000'/>
<set label='12月' value='35000'/>
</chart>


運用FusionCharts插件的幾個步驟:



  第一步:引入FusionCharts.js文件,
  第二步:定義一個div,它必須具備一個元素:id(swf所顯示的位置)
 第三步:定義一個FusionCharts對象
 var chart = new FusionCahrts(param1,param2,param3,param4)
 param1 swf的路徑
 param2 定義一個id是不重名的swf名稱
 param3  寬度
 param4 高度
 第四步:設置數據文件
 第五步:指定圖形渲染位置
 char.render("chartId_01");

Chart    xml文件解釋


baseFont='SunSim' 文字類型


baseFontSize='12' 文字大小

subcaption=' ' 子標題

yAxisMinValue='0'  y軸最小值

yAxisMaxValue='100000'  y軸最大值
hovercapbg='ffecaa'  鼠標停在位置的背景顏色

hovercapborder='f47e00' 鼠標所停位置的邊框顏色

formatNumberScale='1'   是否加單位k (千)  0表示沒有千單位  1 表示加k單位

decimalPrecision='2'   小數位數

showNames='1'    是否顯示x軸座標的名稱(1表示顯示,0表示不顯示)

showValues='1'    是否顯示每個x軸座標的值(1表示顯示,0表示不顯示)

rotateNames='1'   是否旋轉x軸的文字

numdivlines='10'   x軸的網格數

numVdivlines='10'  y軸的網格數
 xAxisName='月份'   x軸名稱

yAxisName='銷售個數'  y軸名稱

caption='2014年年度銷售情況統計分析'  圖形的標題
useRoundEdges='1'

bgColor='ffffff,ffffff'       

showBorder='5'


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章