zoukankan      html  css  js  c++  java

  • 【FusionCharts学习-2】第一个FusionCharts程序

    获取资源
    到官网：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. 			}
    70. 		});
    71. 		revenueChart.render();
    72. 	})
    73. </script>
    74. </head>
    75. <body>
    76. 	<div id="chartContainer">FusionCharts XT will load here!</div>
    77. </body>
    78. </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 + "/";
    3. 	
    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 ；
    将出现如下界面：













    附件列表
    • 相关阅读:
      64_q2
      64_q1
      64_p10
      64_p9
      64_p8
      64_p7
      64_p6
      64_p5
      64_p4
      64_p3
    • 原文地址：https://www.cnblogs.com/ssslinppp/p/4521903.html
    Copyright © 2011-2022 走看看