fusioncharts使用(一)分析参考示例

fusioncharts使用(一)分析参考示例

以前使用fusioncharts来做了个简单的柱状图，这次想使用它来实现一些比较复杂的图，同时要实现图上的js驱动。

看到它网站上的例子倒是有这样的效果，示例地址：
http://www.fusioncharts.com/Demos/Blueprint/

下载这个示例对应的代码来测试一下，得到文件FusionCharts_JSP.zip
参考里面的readme.txt来处理

1.建库建表
查找文件夹下的SQL文件E:\book\opensource\chart\fusioncharts\FusionCharts_JSP\FusionChartsDB\MySQL
用Query Tool打开用root登陆打开SQL文件，执行。新建了库fusionchartsdb和表
fc_categories, fc_customers, fc_employees, fc_orderdetails, fc_orders, fc_products, fc_suppliers等。
新增用户fcuser，密码fcuser，并将库fusionchartsdb的所有权限赋予fcuser。

2.我决定新建工程easyfusionchart来完成后续步骤，这样方便我学习代码。
拷贝代码E:\book\opensource\chart\fusioncharts\FusionCharts_JSP\Class_SourceCode到我们的eclipse的java目录
拷贝应用E:\book\opensource\chart\fusioncharts\FusionCharts_JSP\App到我们的WebRoot目录
拷贝mysql驱动mysql-connector-java-5.1.6.jar到tomcat\lib目录下
修改eclipse中tomcat的context，由于我是用tomcat6.0.18，所以修改如下：
<Resource name="jdbc/FusionChartsDB"
auth="Container"
type="javax.sql.DataSource"
username="fcuser"
password="fcuser"
driverClassName="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/fusionchartsdb?autoReconnect=true"
maxActive="8"
maxIdle="4"/>
修改我的web.xml如下：
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>FusionChartsWeb</display-name>
<servlet>
<description>
</description>
<display-name>InitServlet</display-name>
<servlet-name>InitServlet</servlet-name>
<servlet-class>com.sillycat.easyfusionchart.InitServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>InitServlet</servlet-name>
<url-pattern>/servlet/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<context-param>
<param-name>dbName</param-name>
<param-value>MySQL</param-value>
<description>Name of the Database to be used</description>
</context-param>
<context-param>
<param-name>dataSourceName</param-name>
<param-value>jdbc/FusionChartsDB</param-value>
<description>DataSource Name</description>
</context-param>
</web-app>

由于我将包名更改为com.sillycat.easyfusionchart，所以所有的配置和jsp中都要相应替换，或者也可以不修改。嘿嘿。不过我喜欢把项目名称改成easy打头。

再访问路径http://localhost:8080/easyfusionchart/BluePrintApp/Default.jsp 就可以看到demo的效果了。那么接下来就仔细学习下代码，看怎么应用到我们的项目中吧。