码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-05-22 12:54:19      阅读:103      评论:0      收藏:0      [点我收藏+]

标签:

获取资源

到官网: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程序

    标签:

    原文地址:http://www.cnblogs.com/ssslinppp/p/4521903.html

    (0)
    (0)
       
    举报
    评论 一句话评论(0
    登录后才能评论!
    © 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
    迷上了代码!