获取资源

到官网:http://www.fusioncharts.com/download/ 获取FusionCharts文件;

目录结构:

js目录下的文件:



创建项目

1. 项目名称:FusionChartsTest;
2.  在webroot下创建文件夹:fusionCharts;
3.  将下载的js目录下的所有文件拷贝到刚刚创建的FusionCharts文件夹下;
整个的目录结构如下,至此,FusionCharts已经导入到了我们的工程中。


编写jsp界面

编写index.jsp界面,内容如下:

  1. <%@ page language="java" pageEncoding="UTF-8"%>
  2. <%
  3. String path = request.getContextPath();
  4. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
  5. response.setHeader("Pragma", "no-cache");
  6. response.setHeader("Cache-Control", "no-cache");
  7. response.setDateHeader("Expires", 0);
  8. %>
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html>
  11. <head>
  12. <title>My first FusionCharts</title>
  13. <script type="text/javascript" src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
  14. <script type="text/javascript" src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>
  15. <script type="text/javascript">
  16. FusionCharts.ready(function() {
  17. var revenueChart = new FusionCharts({
  18. "type" : "column2d",
  19. "renderAt" : "chartContainer",
  20. "width" : "500",
  21. "height" : "300",
  22. "dataFormat" : "json",
  23. "dataSource" : {
  24. "chart" : {
  25. "caption" : "Monthly revenue for last year-总标题",
  26. "subCaption" : "Harry's SuperMart-子标题",
  27. "xAxisName" : "Month-x轴名称",
  28. "yAxisName" : "Revenues (In USD)-y轴名称",
  29. "theme" : "fint"
  30. },
  31. "data" : [ {
  32. "label" : "Jan",
  33. "value" : "420000"
  34. }, {
  35. "label" : "Feb",
  36. "value" : "810000"
  37. }, {
  38. "label" : "Mar",
  39. "value" : "720000"
  40. }, {
  41. "label" : "Apr",
  42. "value" : "550000"
  43. }, {
  44. "label" : "May",
  45. "value" : "910000"
  46. }, {
  47. "label" : "Jun",
  48. "value" : "510000"
  49. }, {
  50. "label" : "Jul",
  51. "value" : "680000"
  52. }, {
  53. "label" : "Aug",
  54. "value" : "620000"
  55. }, {
  56. "label" : "Sep",
  57. "value" : "610000"
  58. }, {
  59. "label" : "Oct",
  60. "value" : "490000"
  61. }, {
  62. "label" : "Nov",
  63. "value" : "900000"
  64. }, {
  65. "label" : "Dec",
  66. "value" : "730000"
  67. } ]
  68. }
  69. });
  70. revenueChart.render();
  71. })
  72. </script>
  73. </head>
  74. <body>
  75. <div id="chartContainer">FusionCharts XT will load here!</div>
  76. </body>
  77. </html>


问题说明:
直接安装官网上的方式引入js文件,程序代码如下:

  1. <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
  2. <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>

运行时,会发现出不来FusionCharts图表,通过firebug调试发现,项目没有成功引入两个js文件,所以需要通过下面的方式引入js文件:

  1. String path = request.getContextPath();
  2. String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

  1. <script type="text/javascript" src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
  2. <script type="text/javascript" src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>



运行结果

在tomcat下运行该项目,然后在浏览器中输入:http://localhost:8080/FusionChartsTest/index.jsp ;
将出现如下界面:









附件列表

【FusionCharts学习-2】第一个FusionCharts程序的更多相关文章

  1. swift学习:第一个swift程序

    原文:swift学习:第一个swift程序 最近swift有点火,赶紧跟上学习.于是,个人第一个swift程序诞生了... 新建项目

  2. Spring学习之第一个AOP程序

    IOC和AOP是Spring的两大基石,AOP(面向方面编程),也可称为面向切面编程,是一种编程范式,提供从另一个角度来考虑程序结构从而完善面向对象编程(OOP). 在进行 OOP 开发时,都是基于对 ...

  3. python flask框架学习(二)——第一个flask程序

    第一个flask程序 学习自:知了课堂Python Flask框架——全栈开发 1.用pycharm新建一个flask项目 2.运行程序 from flask import Flask # 创建一个F ...

  4. JavaWeb学习系列——第一个JavaWeb程序

    创建JavaWeb项目 Eclipse中新建一个Dynamic Web Project 指定项目名称.依赖环境 勾选生成web.xml选项 更改项目编译输出目录,项目右键 ->propertie ...

  5. c++学习笔记---03---从一个小程序说起2

    从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...

  6. c++学习笔记---02---从一个小程序说起

    从一个小程序说起 这一讲的主要目的是帮助大家在C语言的背景知识上与C++建立联系. 问题探索 问题:对一个整型数组求和. 要求:定义一个存储着 n 个元素的数组,要求用C语言完成这个任务. 赶紧的:大 ...

  7. python新手第一天学习笔记-第一个ptyhon程序和python变量

    一.python 的注释和第一个python 程序 : 1.单行注释 # Author Xiajq 2.多行注释 ''' ------------注释内容----------------------- ...

  8. Android学习笔记_70_一个应用程序启动另一个应用程序的Activity

    第一种(我自己写的) :之前在网上看来一些,很多不是我要的可以启动另外一个应用程序的主Activity. //这些代码是启动另外的一个应用程序的主Activity,当然也可以启动任意一个Activit ...

  9. Android开发学习之三——第一个Android程序

    下面我们建立第一个Android程序. 打开Eclipse,开始如下步骤: 1.File ==> New ==> Android Application Project 出现如下窗口: 2 ...

  10. JAVA学习之第一个HelloWorld程序

    第一个HelloWorld程序 第一步,创建java类型的文件 第二步,在创建文件的目录中打开cmd窗口 第三步,使用javac 命令将java文件编译为.class类型的字节码文件 第四步,使用ja ...

随机推荐

  1. Git HEAD 意思详解 和版本回退

    首先,Git必须知道当前版本是哪个版本,在git中,用HEAD表示当前版本,也就是最新的提交3628164...882e1e0(注意我的提交ID和你的肯定不一样),上一个版本就是HEAD^,上上一个版 ...

  2. spoj8406

    题解: 二分+树状数组 记录以下i在当前拍第几 代码: #include<bits/stdc++.h> using namespace std; ; int a[N],f1[N],f2[N ...

  3. oracle多表查询之内连接,外连接语句总结

    后期会补充建表语句. 现有两张表,westemp员工表,有(wtdempid,wtdempname,wtddeptid)列,westdept部门表,有(wtddeptid,wtddeptname,wt ...

  4. 《Python》 函数进阶和名称空间作用域

    函数进阶: 一.动态参数:*args  **kwargs *args是元祖形式,接收除去键值对以外的所有参数 # args可以换成任意变量名,约定俗成用args **kwargs接收的只是键值对的参数 ...

  5. 前端必学库之bootstrap

    想要成为一个全栈程序员,其实有很多技术线路.很多人说有了nodejs后,只学JAVASCRIPT就可以了.其实,会NODEJS后端开发,严格来说算是高级前端.就站长个人理解,后端的主流还是4P:jsp ...

  6. windows 自动copy远程服务器文件

    net use h: \\123.45.67.000\T1dbbackup 123456/user:administrator ------远程服务器IP123.45.67.000  .T1dbbac ...

  7. LCD常用接口原理概述

    Android LCD(5)  平台信息:内核:linux2.6/linux3.0系统:android/android4.0 平台:samsung exynos 4210.exynos 4412 .e ...

  8. 那些年,追寻JMeter的足迹,免费送……

    ​我们测试技术部武汉团队自16年引入jmeter以来,利用jmeter做了很多事情.首先运用jmeter进行接口测试,后续实现jmeter自动化冒烟测试,顺带也实现了线上环境的巡检,节省了大量人力.j ...

  9. Linux C single linked for any data type

    /************************************************************************** * Linux C single linked ...

  10. CodeForces - 1093F:Vasya and Array (DP&计数)

    题意:N,K,L,以及给定长度为N的序列,表示其对应的颜色,-1表示还没有涂色,现在让你去涂色,使得最后没有大于等于L的连续的同色的情况. 思路:我们用dp[i][j]表示第i个位置颜色为j的合法方案 ...