时间戳

首页 > 技术文章 > FusionCharts之我用

FusionCharts之我用

xiufengd 2015-12-14 09:29 原文

fusioncharts：（此控件需flash支持）

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

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

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

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

XML
<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"
        }
    ]
}

　　主要讲通过XML获取数据的方法，
　　用xml时有两种方法，一种是读取xml文件中的内容，然后使用；另一种是直接在程序中拼xml内容直接使用。

　　第一种代码

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

　　第二种代码

var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");
chart.setDataXML(xml);
chart.render("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 xml文件的

Data.xml:
<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.xml"); 
            chart.render("dxf");
        }
    </script>
    <a href="javascript:createTb()">ssssssss</a>
<div style="border:solid thin #000" id="dxf">    
</div>
</body>     
</html>

2 直接拼xml内容的
<!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 xml="<graph  xAxisName='Type' yAxisName='Units' showNames='图表' decimalPrecision='6' formatNumberScale='0'>"+
                       "<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>";
            var chart = new FusionCharts("FusionCharts/Line.swf", "chartid", "400", "300");
            chart.setDataXML(xml);
            chart.render("dxf");
        }
    </script>
    <a href="javascript:createTb()">ssssssss</a>
<div style="border:solid thin #000" id="dxf">    
</div>
</body>
</html>

 

推荐阅读