第一步,下载FusionCharts.

第二步,建立一个工程,最简单的结构如下:

　　　　　　　　webcontent

　　　　　　　　　　/    \

　　　　　　show.jsp    FusionCharts

　　　　　　　　　　　　　/      \

　　　　　　　　　　　theme    (1)

　　　　　　　　　　　　 |

　　　　　　　　　　　　(2)

(1)

  • fusioncharts.charts.js
  • fusioncharts.js
  • fusioncharts.powercharts.js
  • fusioncharts.gantt.js
  • fusioncharts.maps.js
  • fusioncharts.widgets.js

(2)

　　下载的源代码中theme文件夹中内容,可根据需要进行copy((1)中的也不是全需要)

第三步,jsp页面代码

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>fusioncharts demo</title>
<script type="text/javascript" src="FusionCharts/fusioncharts.js"></script>
<script type="text/javascript" src="FusionCharts/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">
    FusionCharts.ready(function(){
        var revenueChart=new FusionCharts({
            "type":"column3d",
            "renderAt":"container",
            "width":"500",
            "height":"300",
            "dataFormat":"json",
            "dataSource":{
                "chart":{
                    "caption":"numbers of learning defferent language",
                    "xAxisName":"language",
                    "yAxisName":"people",
                    "theme":"hint"
                },
                "data":[
                    { "label":"c","value":"1000"}, 
                    { "label":"c++","value":"800"}, 
                    { "label":"c--","value":"10000"},
                    { "label":"c++--","value":"5000"},
                    { "label":"java","value":"6000"} 
                        ]
                    
            }
        });
        
        revenueChart.render();
    })
</script>
</head>
<body>
    <div id="container">look here!!!</div>
</body>
</html>

需指定一个唯一的id以在其中添加图表,type中可以指定样式,图表中的数据格式可以为xml或json

结果如图:

　　

ok,一个小demo完成了,官网还有更详细的教程呦!