你的位置:首页 > Java教程

[Java教程]FusionCharts之我用


fusioncharts:(此控件需flash支持)

  介绍:http://baike.baidu.com/link?url=SOheR7sQlb93S5TqYmeI7FhtJ0V9ABNwH6OsAaNu05JFWCHGTwsfejSw8S6rFUCK57Y2YunL2CbzpVZZTSLhFK

  使用该插件需要首先做的两件事

    1 先把swf导入项目中
    2 先把fusioncharts.js导入项目中并引入页面中

  fusioncharts获取数据有两种方法,一是通过jesson,另一个是通过

<chart caption="Total Revenues from 2008-2013" numberprefix="$" bgcolor="FFFFFF" showalternatehgridcolor="0" plotbordercolor="008ee4" plotborderthickness="3" showvalues="0" divlinecolor="CCCCCC" showcanvasborder="0" tooltipbgcolor="00396d" tooltipcolor="FFFFFF" tooltipbordercolor="00396d" numdivlines="2" yaxisvaluespadding="20" anchorbgcolor="008ee4" anchorborderthickness="0" showshadow="0" anchorradius="4" chartrightmargin="25" canvasborderalpha="0" showborder="0"><set label="2009" value="4400000" color="008ee4" /><set label="2010" value="4800000" color="008ee4" /><set label="2011" value="5500000" color="008ee4" /><set label="2012" value="6700000" color="008ee4" anchorradius="7" tooltext="Historical high" /><set label="2013" value="4200000" color="008ee4" /></chart>JSON={  "chart": {    "caption": "Total Revenues from 2008-2013",    "numberprefix": "$",    "bgcolor": "FFFFFF",    "showalternatehgridcolor": "0",    "plotbordercolor": "008ee4",    "plotborderthickness": "3",    "showvalues": "0",    "divlinecolor": "CCCCCC",    "showcanvasborder": "0",    "tooltipbgcolor": "00396d",    "tooltipcolor": "FFFFFF",    "tooltipbordercolor": "00396d",    "numdivlines": "2",    "yaxisvaluespadding": "20",    "anchorbgcolor": "008ee4",    "anchorborderthickness": "0",    "showshadow": "0",    "anchorradius": "4",    "chartrightmargin": "25",    "canvasborderalpha": "0",    "showborder": "0"  },  "data": [    {      "label": "2009",      "value": "4400000",      "color": "008ee4"    },    {      "label": "2010",      "value": "4800000",      "color": "008ee4"    },    {      "label": "2011",      "value": "5500000",      "color": "008ee4"    },    {      "label": "2012",      "value": "6700000",      "color": "008ee4",      "anchorradius": "7",      "tooltext": "Historical high"    },    {      "label": "2013",      "value": "4200000",      "color": "008ee4"    }  ]}

  主要讲通过  用

  第一种代码

  var chart = new FusionCharts("Charts/FCF_Column3D.swf", "ChartId", "500", "300");  chart.setDataURL("<%=request.getContextPath()%>"+"/file/post);   chart.render("chartdiv1");

  第二种代码

var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");chart.setData"dxf");

  FusionCharts函数的参数分别为:
    swf文件的路径
    charts的唯一标示id,随意起但不可以重复
    图表显示的宽度
    图表显示的高度

  graph的主要属性意思:
    caption 大标题
    subcaption 小标题
    xAxisName x轴名
    yAxisName y轴名
    yAxisMinValue x轴最小值(起始坐标)
    decimalPrecision小数精度
    formatNumberScale是否自动补齐小数,0为否。

  具体属性可参考:http://wenku.baidu.com/link?url=c7zwPmlxv3-eu8IEDJOWYlwtLCjKrKakLY_-hOZfj5jd8vPvj3U9fpEBdnmuVzh1xBBKnZiBfvT_oAZOuSE4dYB5OXXNTOr5IXhOiO-2jD3

  两个完整的例子:

1 <graph caption='Monthly Sales Summary' subcaption='For the year 2004' xAxisName='Month' yAxisMinValue='15000' yAxisName='Sales' decimalPrecision='0' formatNumberScale='0' numberPrefix='' showNames='1' showValues='0' showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20' alternateHGridAlpha='5' >  <set name='Jan' value='17400'/>  <set name='Feb' value='19800'/>  <set name='Mar' value='21800'/>  <set name='Apr' value='23800'/>  <set name='May' value='29600'/>  <set name='Jun' value='27600'/>  <set name='Jul' value='31800'/>  <set name='Aug' value='39700'/>  <set name='Sep' value='37800'/>  <set name='Oct' value='21900'/>  <set name='Nov' value='32900'/>  <set name='Dec' value='39800'/></graph>html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>   <head>        <title>My First FusionCharts</title>     <style type="text/css">      #dxf{        width:400px;        height:300px;      }     </style>     <script type="text/javascript" src="js/FusionCharts.js"></script></head>   <body bgcolor="#ffffff" > <script type="text/javascript">    function createTb()    {      var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");      chart.setDataURL("datas/Data.);       chart.render("dxf");    }  </script>  <a href="javascript:createTb()">ssssssss</a><div id="dxf">  </div></body>   </html>2 直接拼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>   <head>        <title>My First FusionCharts</title>     <style type="text/css">      #dxf{        width:400px;        height:300px;      }     </style>     <script type="text/javascript" src="js/FusionCharts.js"></script></head>   <body bgcolor="#ffffff" > <script type="text/javascript">    function createTb()    {      var ;      var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");      chart.setData"dxf");    }  </script>  <a href="javascript:createTb()">ssssssss</a><div id="dxf">  </div></body></html>