获取资源
到官网：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. 

  2. <%
    3. 

  3. 	String path = request.getContextPath();
    4. 

  4. 	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    5. 

  5. 	response.setHeader("Pragma", "no-cache");
    6. 

  6. 	response.setHeader("Cache-Control", "no-cache");
    7. 

  7. 	response.setDateHeader("Expires", 0);
    8. 

  8. %>
    9. 

  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    10. 

  10. <html>
    11. 

  11. <head>
    12. 

  12. <title>My first FusionCharts</title>
    13. 

  13. <script type="text/javascript" src="<%=basePath%>fusionCharts/fusioncharts.js"></script>
    14. 

  14. <script type="text/javascript" src="<%=basePath%>fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    15. 

  15. <script type="text/javascript">
    16. 

  16. 	FusionCharts.ready(function() {
    17. 

  17. 		var revenueChart = new FusionCharts({
    18. 

  18. 			"type" : "column2d",
    19. 

  19. 			"renderAt" : "chartContainer",
    20. 

  20. 			"width" : "500",
    21. 

  21. 			"height" : "300",
    22. 

  22. 			"dataFormat" : "json",
    23. 

  23. 			"dataSource" : {
    24. 

  24. 				"chart" : {
    25. 

  25. 					"caption" : "Monthly revenue for last year-总标题",
    26. 

  26. 					"subCaption" : "Harry's SuperMart-子标题",
    27. 

  27. 					"xAxisName" : "Month-x轴名称",
    28. 

  28. 					"yAxisName" : "Revenues (In USD)-y轴名称",
    29. 

  29. 					"theme" : "fint"
    30. 

  30. 				},
    31. 

  31. 				"data" : [ {
    32. 

  32. 					"label" : "Jan",
    33. 

  33. 					"value" : "420000"
    34. 

  34. 				}, {
    35. 

  35. 					"label" : "Feb",
    36. 

  36. 					"value" : "810000"
    37. 

  37. 				}, {
    38. 

  38. 					"label" : "Mar",
    39. 

  39. 					"value" : "720000"
    40. 

  40. 				}, {
    41. 

  41. 					"label" : "Apr",
    42. 

  42. 					"value" : "550000"
    43. 

  43. 				}, {
    44. 

  44. 					"label" : "May",
    45. 

  45. 					"value" : "910000"
    46. 

  46. 				}, {
    47. 

  47. 					"label" : "Jun",
    48. 

  48. 					"value" : "510000"
    49. 

  49. 				}, {
    50. 

  50. 					"label" : "Jul",
    51. 

  51. 					"value" : "680000"
    52. 

  52. 				}, {
    53. 

  53. 					"label" : "Aug",
    54. 

  54. 					"value" : "620000"
    55. 

  55. 				}, {
    56. 

  56. 					"label" : "Sep",
    57. 

  57. 					"value" : "610000"
    58. 

  58. 				}, {
    59. 

  59. 					"label" : "Oct",
    60. 

  60. 					"value" : "490000"
    61. 

  61. 				}, {
    62. 

  62. 					"label" : "Nov",
    63. 

  63. 					"value" : "900000"
    64. 

  64. 				}, {
    65. 

  65. 					"label" : "Dec",
    66. 

  66. 					"value" : "730000"
    67. 

  67. 				} ]
    68. 

  68. 			}
    69. 

    70. 

  70. 		});
    71. 

  71. 		revenueChart.render();
    72. 

  72. 	})
    73. 

  73. </script>
    74. 

  74. </head>
    75. 

  75. <body>
    76. 

  76. 	<div id="chartContainer">FusionCharts XT will load here!</div>
    77. 

  77. </body>
    78. 

  78. </html>

问题说明：
直接安装官网上的方式引入js文件，程序代码如下：
  1. <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
    2. 

  2. <script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.fint.js"></script>
运行时，会发现出不来FusionCharts图表，通过firebug调试发现，项目没有成功引入两个js文件，所以需要通过下面的方式引入js文件：
  1. String path = request.getContextPath();
    2. 

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

  3. 	


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

  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. ASP.NET的MVC中Model对象字段的数…

    ASP.NET的MVC中Model对象字段的常用数据说明属性: Required——该字段不允许为空. MaxLength——设置数组或字符串最大长度. StringLength——设置字符串最小和最 ...

  2. ReentrantLock的原理解析

    重入锁(ReentrantLock)是一种可重入无阻塞的同步机制.性能同synchronized接近(老版本jdk中性能很差). 下面重点看下常用的lock()和unlock()方法的实现原理. lo ...

  3. DIY微型操作系统（2）—— 寄存器赋值

    书上已经为我们提供了最简单的“hello world”程序了 相信大家玩的也挺欢乐的,不过这只是引导扇区的雏形 而且如果找不到完整的光盘上的源代码,新手估计很难学的下去 所以之后文中也会尽量贴出代码 ...

  4. Andriod Studio 解决问题 Failed to resolve: com.android.support:appcompat-v7:28.+

    Andriod Studio报错提示: Error:(26, 13) Failed to resolve: com.android.support:appcompat-v7:28.+ 原因:Andri ...

  5. DelaunayTriangulation_VoronoiDiagram_using_OpenCV的实现

    前言 最近project中有关于delaunay的实现问题,查找资料,看到learnopencv这个网站,有很多peoject的实现,本文主要是实现Delaunay Triangulation and ...

  6. 游标 cursor

    * mongo shell下支持JS代码,可以通过JS获取游标,进而获取数据操作结果. var cursor = db.class1.find() cursor.next() 获取下一条结果 curs ...

  7. stm32内部温度计算方法

    计算公式:Temperature  = {(V25 - VSENSE) / Avg_Slope} + 25 V25              最小=1.34V     典型=1.43V   最大=1. ...

  8. 20155229 2016-2017-2 《Java程序设计》第六周学习总结

    20155229 2016-2017-2 <Java程序设计>第六周学习总结 教材学习内容总结 第十章 Java中,输入串流代表对象为java.io.InputStream,输出串流代表对 ...

  9. （dfs痕迹清理兄弟篇）bfs作用效果的后效性

    dfs通过递归将每种情景分割在不同的时空,但需要对每种情况对后续时空造成的痕迹进行清理(这是对全局变量而言的,对形式变量不需要清理(因为已经被分割在不同时空)) bfs由于不是利用递归则不能分割不同的 ...

  10. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...