SSH系列:(30)FusionCharts

基本步骤:

(1)下载JS,

(2)引入JS文件

(3)写Javascript使用JS

1、下载

FusionCharts是使用javascript 实现统计图表的js组件;其官网地址:http://www.fusioncharts.com。其早期版本FusionCharts Free 是基于flash来实现,而在2014年其脱离开flash完全使用js来实现统计图表的FusionCharts Suite XT来替代FusionCharts Free使其具有充分跨浏览器和终端的特点。

[应用环境]

FusionCharts Suite XT is a JavaScript library that runs on your desktop and mobile web browsers.

[安装FusionCharts]

Installation of FusionCharts Suite XT merely involves copying and pasting the JavaScript files from the download package into your project folder.

[Javascript文件的位置]

The JavaScript files of FusionCharts Suite library are located in js folder of your download package.

js文件 作用
fusioncharts.js This is the core FusionCharts library, which you need to include in all your pages where a chart, gauge or map is required to be generated.
fusioncharts.charts.js This file is required to render all charts present under FusionCharts XT.

2、引入JS文件

将fusioncharts.js、themes/fusioncharts.theme.fint.js引入到项目当中,如下图

2.1、初始页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

2.2、引入JS文件到页面中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
    <script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

添加的部分是

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

2.3、使用FusionCharts

添加Javascript代码,如下:

<script type="text/javascript">
    FusionCharts.ready(function(){
          var revenueChart = new FusionCharts({
            "type": "column2d",
            "renderAt": "chartContainer",
            "width": "500",
            "height": "300",
            "dataFormat": "json",
            "dataSource": {
              "chart": {
                  "caption": "Monthly revenue for last year",
                  "subCaption": "Harry‘s SuperMart",
                  "xAxisName": "Month",
                  "yAxisName": "Revenues (In USD)",
                  "theme": "fint"
               },
              "data": [
                  {
                     "label": "Jan",
                     "value": "420000"
                  },
                  {
                     "label": "Feb",
                     "value": "810000"
                  },
                  {
                     "label": "Mar",
                     "value": "720000"
                  },
                  {
                     "label": "Apr",
                     "value": "550000"
                  },
                  {
                     "label": "May",
                     "value": "910000"
                  },
                  {
                     "label": "Jun",
                     "value": "510000"
                  },
                  {
                     "label": "Jul",
                     "value": "680000"
                  },
                  {
                     "label": "Aug",
                     "value": "620000"
                  },
                  {
                     "label": "Sep",
                     "value": "610000"
                  },
                  {
                     "label": "Oct",
                     "value": "490000"
                  },
                  {
                     "label": "Nov",
                     "value": "900000"
                  },
                  {
                     "label": "Dec",
                     "value": "730000"
                  }
               ]
            }
        });

        revenueChart.render();
    })

</script>

完整的HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="js/fusioncharts/fusioncharts.js"></script>
    <!--<script type="text/javascript" src="js/fusioncharts/fusioncharts.charts.js"></script>-->
    <script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
    <script type="text/javascript">
        FusionCharts.ready(function(){
              var revenueChart = new FusionCharts({
                "type": "column2d",
                "renderAt": "chartContainer",
                "width": "500",
                "height": "300",
                "dataFormat": "json",
                "dataSource": {
                  "chart": {
                      "caption": "Monthly revenue for last year",
                      "subCaption": "Harry‘s SuperMart",
                      "xAxisName": "Month",
                      "yAxisName": "Revenues (In USD)",
                      "theme": "fint"
                   },
                  "data": [
                      {
                         "label": "Jan",
                         "value": "420000"
                      },
                      {
                         "label": "Feb",
                         "value": "810000"
                      },
                      {
                         "label": "Mar",
                         "value": "720000"
                      },
                      {
                         "label": "Apr",
                         "value": "550000"
                      },
                      {
                         "label": "May",
                         "value": "910000"
                      },
                      {
                         "label": "Jun",
                         "value": "510000"
                      },
                      {
                         "label": "Jul",
                         "value": "680000"
                      },
                      {
                         "label": "Aug",
                         "value": "620000"
                      },
                      {
                         "label": "Sep",
                         "value": "610000"
                      },
                      {
                         "label": "Oct",
                         "value": "490000"
                      },
                      {
                         "label": "Nov",
                         "value": "900000"
                      },
                      {
                         "label": "Dec",
                         "value": "730000"
                      }
                   ]
                }
            });

            revenueChart.render();
        })

    </script>
    <title></title>
</head>
<body>
    <div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

效果图

时间: 2024-11-10 01:08:04

SSH系列:(30)FusionCharts的相关文章

【SSH系列】静态代理&amp;&amp;动态代理

从设计模式说起 代理模式是二十三中设计模式中的一种,代理模式就是指由一个代理主题来操作真实的主题,真实的主题执行具体的业务操作,而代理主题负责其她相关业务,简而言之,代理模式可以由以下三个部分组成: a.抽象角色:通过接口或抽象类声明真实角色实现的业务方法. b.代理角色:实现抽象角色,是真实角色的代理,通过真实角色的业务逻辑方法来实现抽象方法,并可以附加自己的操作. c.真实角色:实现抽象角色,定义真实角色所要实现的业务逻辑,供代理角色调用.第一次接触代理模式的是在学习大话设计模式的时候,首先

asp.net core系列 30 EF管理数据库架构--必备知识 迁移

原文:asp.net core系列 30 EF管理数据库架构--必备知识 迁移 一.管理数据库架构概述 EF Core 提供两种主要方法来保持 EF Core 模型和数据库架构同步.一是以 EF Core 模型为基准,二是以数据库为基准. (1)如果希望以 EF Core 模型为准,请使用迁移. 对 EF Core 模型进行更改时,此方法会以增量方式将相应架构更改应用到数据库,以使数据库保持与 EF Core 模型兼容.  (2)如果希望以数据库架构为准,请使用反向工程. 使用此方法,可通过将数

SSH系列:(31)将FusionCharts导出为图片、PDF、Excel

本文的思路: (1)准备一个Java Web项目 (2)将FusionCharts加入到项目 (3)将FusionChart输出为图片.PDF.Excel 环境: 操作系统:Windows 8.1 企业版 开发环境:MyEclipse 2015 Stable 2.0 1.准备JavaWeb项目 FusionCharts可以接受JSON.XML类型的数据,而JSON类型的数据相对比较简单,因此我们准备的JavaWeb项目能够提供返回JSON数据的能力. 1.1.新建Web Project 添加一个

《Entity Framework 6 Recipes》中文翻译系列 (30) ------ 第六章 继承与建模高级应用之多对多关联

翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第六章  继承与建模高级应用 现在,你应该对实体框架中基本的建模有了一定的了解,本章将帮助你解决许多常见的.复杂的建模问题,并解决你可能在现实中遇到的建模问题. 本章以多对多关系开始,这个类型的关系,无论是在现存系统还是新项目的建模中都非常普遍.接下来,我们会了解自引用关系,并探索获取嵌套对象图的各种策略.最后,本章以继承的高级建模和实体条件结束. 6-1  获取多对多关联中的链接表 问题

SSH系列:(28)JDK Timer和Quartz

常见的任务调度有Jdk 的Timer 以及 spring中quartz任务调度框架等. 1.JDK Timer 如果是执行简单的有一定执行周期的,那么使用jdk自带的timer是最简单的. 具体步骤: ①.编写一个简单类继承 TimerTask,在这个新编写的类中重写父类中run方法,在run中执行要执行的操作: ②.编写一个简单类,在类中写一个方法,方法体中使用timer调用在①中创建的类并设置好timer执行周期. MyTask.java package com.rk.test; impor

【SSH系列】Hibernate映射 -- 多对多关联映射

     映射原理 在数据库学习阶段,我们知道,如果实体和实体之间的关系是多对多,那么我们就抽出来第三张表,第一张表和第二张表的主键作为第三表的联合主键,结合我们的hibernate,多对多关联,无论是单向关联还是双向关联都是通过第三张表,将两个表中的主键放到第三张表中做一个关联,用第三张表来解决可能造成的数据冗余问题.今天这篇博文小编来简单的介绍一下hibernate中的多对多关联映射. 在某些系统中,一个用户可以有多个角色,一个角色也可以有多个用户,so,她们之间的关系就是多对多,多对多关联

【SSH系列】-- hibernate基本原理&amp;&amp;入门demo

    什么是hibernate?      hibernate在英文中是冬眠的意思,当冬季来临,世界万物开始准备冬眠,但是程序猿这种动物好像不冬眠,因为需求变了,要改bug,冬眠,对于对象来说就是持久化.什么叫做持久化呢?持久化,就是把数据(如内存中的对象)保存到可永久保存的存储设备中,比如磁盘,持久化的主要应用就是将内存中的对象存储在数据库中,或者存储在磁盘文件中.xml文件中等等.持久化是将程序数据在持久状态和瞬时状态间转换的机制.JDBC就是一种持久化机制,文件IO也是一种持久化机制. 

SSH系列:(32)年度投诉数统计

1.JSP页面 annualStatisticChartUI.jsp <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% Calendar cal = Calendar.getInstance(); int curYear = cal.get(Calendar.YEAR);//当前年份 request.setAttribute("

SSH系列:(23)Ueditor

1.Ueditor下载 地址:http://ueditor.baidu.com/website/download.html#ueditor 由于我的SSH项目是UTF-8编码的,所以下载UTF-8版本的UEditor. 2.HelloWorld示例 解压下载的压缩包,内容如下: 第1个例子,来源于https://github.com/fex-team/ueditor 在当前目录下,添加一个demo.html文件,内容如下: <!doctype html> <html lang="