奥门新浦京官方网站生成json的几种方式

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

大家好我是IT修真院一枚纯洁的程序员,今天给大家分享一下生成json的几种方式

林炳文Evankaka原创作品。转载请注明出处    

不管有多少服务器端语言出现,没有谁能够取代PHP。至少是不久的将来都不可能。
PHP还有许多最著名的web应用程序的支柱。

1.背景介绍

JSON-taglib是一个JSP 2.0标记库,用于在JSP代码中呈现JSON(JavaScript
Object
Notation)数据。它可以作为AJAX应用程序的服务器端的一部分,允许您使用JSP的全部功能来格式化您的JSON数据。

标签库建立在由Douglas Crockford编写的Java JSON库上。

JSON指的是 JavaScript对象表示法(JavaScript Object Notation)

JSON是轻量级的文本数据交换格式

JSON独立于语言以上传.json使用的JavaScript的的语法来描述数据对象,但是JSON仍然独立于语言和平台以上传上传.json解析器和JSON库支持许多不同的编程语言目前非常多的动态(PHP,JSP,
.NET)编程语言都支持JSON。

JSON具有自我描述性,更为理解

        摘要:JSON(JavaScript Object Notation)
是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。
JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。
易于人阅读和编写,同时也易于机器解析和生成(网络传输速率)。

如果你是一个后端开发人员,并且PHP是你技术堆栈的一部分,那么你会发现本教程非常有用。在这篇文章中,我将讲解如何一步一步使用PHP,FusionCharts的核心JavaScript图表库,以及它的PHP图表包装程序创建漂亮的图表。

2.知识剖析

JSON是一种轻量级的数据交换格式。它是一种基于文本的,用于表示数据结构的可读格式.JSON是JavaScript对象文字符号的一个子集,广泛用于AJAX
Web应用程序。

JSON-taglib被设计为尽可能易于使用。

它只做一件事:在JSP中呈现JSON数据。

SON-taglib由3个用于定义数据的简单标签组成:JSON:object,JSON:property和JSON:array。

JSON-taglib标签的建立

在JSP中包含taglib。只需将json-taglib jar文件放入webapp的WEB-INF /
lib目录中,然后在JSP的顶部使用以下taglib声明。

<%@ taglib prefix =“json”uri
=“;

一、JSON对象

JSON:object标签用于创建JSON对象对象可以根据需要多次嵌套上传上传上传上传.json对象包含属性,使用上面描述的JSON:属性标签添加。

二、JSON属性

JSON:property标记来呈现JSON属性可以用该属性标签将属性添加到数据,对象或者数组中进行嵌套使用

JSON属性基本上只是名称/值对。

名称就是是一个字符串,可以在标签上设置name =“…”属性。

值通过在标签上设置value =“…”属性。

如果指定的值是一个布尔值,那么它将被转换为一个JSON布尔值

如果指定的值是一个数字(整数,短,长,双,浮点数),那么它将被转换成JSON数值。

如果该值是一个字符串,它将被转换为一个JSON字符串。

任何其他用于设置值的的的的的Java类型都将调用的的的toString()方法,它们将被视为JSON字符串。

三、JSON数组

JSON:array标签用于创建JSON数组上传上传上传上传.json数组可能包含字符串,数值,布尔值,JSON对象或其他JSON数组。

使用items =“…”属性传递值的集合或数组。

集合将被迭代,集合中的每个值都将被添加到JSON数组中。

集合中的项目类型遵循与JSON属性相同的规则,所以整数将成为JSON数字,布尔变成JSON布尔等等。

一、准备工作

      
json是个非常重要的数据结构,在web开发中应用十分广泛。我觉得每个人都应该好好的去研究一下json的底层实现,分析一下json的相关内容,希望大家能有所收获。首先给大家说一下使用json前的准备工作,需要准备下面的六个jar包:

奥门新浦京官方网站 1

      
这里我统一下好打包了,可以在这里来下

需要说明几点:
(1)json-lib最新版本可以从这个地方下载:
(2)ezmorph是一个简单的java类库,用于将一种bean转换成另外一种bean。其动态bean的实现依赖于commons-beanutils包。ezmorph可以在这个地方下载源码:
(3)commons-beanutils是操作Java
Bean的类库,依赖于commons-collections。可以从这里下载:

(4)commons-collections类库是各种集合类和集合工具类的封装。可以从这里下载:

下面就是我们今天要完成的目标图表

3.常见问题

为什么推荐使用JsonTaglib来处理的的的Json的??

二、语法相关

  • JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。
        数据在名称/值对中
       数据由逗号分隔
      花括号保存对象
      方括号保存数组

  • JSON 值

JSON 值可以是:
      数字(整数或浮点数)
     字符串(在双引号中)
     逻辑值(true 或 false)
     数组(在方括号中)
      对象(在花括号中)
     null

  • JSON有两种表示结构

对象和数组。
对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。

{
    key1:value1,
    key2:value2,
    ...
}

{"department":"产品研发","name":"小王","age":23}

其中关键字是字符串,而值可以是字符串,数值,true,false,null,对象或数组

数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。

[
    {
        key1:value1,
        key2:value2 
    },
    {
         key3:value3,
         key4:value4   
    }
]

如:

[{"department":"产品研发","name":"小王","age":23},{"department":"产品研发","name":"小王","age":23}]

奥门新浦京官方网站 2

4.解决方案

使用JSON-标签库,在控制器中的代码更加简洁,易读

使用JSON-标签库更加灵活,如果以后需要更改JSON数据格式,只需要更改JSP页面即可,不需要改动控制器代码

三、Java中使用Json基本使用方法

工程免费下载

Jar包我也上传了,在这里

整个工程目录 如下 :

奥门新浦京官方网站 3

Employer.java如下

package com.mucfc.json;

import net.sf.json.JSONString;

public class Employer {

    private String name;

    private Integer age;

    private String department;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDepartment() {
        return department;
    }

    public void setDepartment(String department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "Employer [name=" + name + ", age=" + age + ", department="
                + department + "]";
    }

/*  @Override  要调用这个方法请implements JSONString
    public String toJSONString() {
        return "{"name":"" + name + "","department":"" + department + ""}";
    }*/

}

JsonTest.java全部代码如下:

package com.mucfc.json;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;
import net.sf.json.util.PropertyFilter;

/**
 *Json使用方法总结
 *@author linbingwen(博客:http://blog.csdn.net/evankaka)
 *@since 2015.7.3
 */
public class JsonTest {

    public static void main(String args[]){
        beanToJson();
        beanToJson1();
        beanToJson2();
        arrayToJson();
        listToJson();       
        mapToJson();

    }


    /**
     * bean对象转json
     * @return void
     */
    public static void beanToJson(){
        Employer employer=new Employer();
        employer.setName("小王");
        employer.setAge(23);
        employer.setDepartment("产品研发");
        JSONObject json = JSONObject.fromObject(employer);
        System.out.println("-----------------------------------------beanToJson() 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------beanToJson() 结束------------------------------------------------");
    }

    /**
     * bean对象转json,带过滤器
     * @return void
     */
    public static void beanToJson1(){
        Employer employer=new Employer();
        employer.setName("小王");
        employer.setAge(23);
        employer.setDepartment("产品研发");
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.setExcludes(new String[]
        { "age" });
        JSONObject json = JSONObject.fromObject(employer, jsonConfig);
        System.out.println("-----------------------------------------beanToJson1()带过滤器 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------beanToJson1()带过滤器 结束------------------------------------------------");
    }

    /**
     * bean对象转json,带过滤器
     * @return void
     */
    public static void beanToJson2(){
        Employer employer=new Employer();
        employer.setName("小王");
        employer.setAge(23);
        employer.setDepartment("产品研发");
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.setJsonPropertyFilter(new PropertyFilter() {
            public boolean apply(Object source, String name, Object value)
            {
                return source instanceof Employer && name.equals("age");
            }
        });
        JSONObject json = JSONObject.fromObject(employer, jsonConfig);
        System.out.println("-----------------------------------------beanToJson2() 带过滤器 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------beanToJson2() 带过滤器 结束------------------------------------------------");
    }

    /**
     * array对象转json
     * @return void
     */
    public static void arrayToJson(){
        Employer employer1=new Employer();
        employer1.setName("小王");
        employer1.setAge(23);
        employer1.setDepartment("产品研发");

        Employer employer2=new Employer();
        employer2.setName("小王");
        employer2.setAge(23);
        employer2.setDepartment("产品研发");        
        Employer[] employers=new Employer[]{employer1,employer2};
        JSONArray json = JSONArray.fromObject(employers);
        System.out.println("-----------------------------------------arrayToJson() 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------arrayToJson() 结束------------------------------------------------");
    }

    /**
     * list对象转json
     * @return void
     */
    public static void listToJson(){
        List<String> list = new ArrayList<String>();
        list.add( "first" );
        list.add( "second" );
        JSONArray json = JSONArray.fromObject(list);
        System.out.println("-----------------------------------------listToJson() 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------listToJson() 结束------------------------------------------------");
    }

    /**
     * map对象转json
     * @return void
     */
    public static void mapToJson(){
        Map<Object,Object> map = new HashMap<Object,Object>();
        map.put("name", "json");
        map.put("bool", Boolean.TRUE);
        map.put("int", new Integer(1));
        map.put("arr", new String[] { "a", "b" });
        map.put("func", "function(i){ return this.arr[i]; }");
        JSONObject json = JSONObject.fromObject(map);
        System.out.println("-----------------------------------------mapToJson() 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------mapToJson() 结束------------------------------------------------");
    }


}

下面分别对各个部分来进行说明

  1. Bean转换成json代码

    /**

      * bean对象转json
      * @return void
      */
     public static void beanToJson(){
         Employer employer=new Employer();
         employer.setName("小王");
         employer.setAge(23);
         employer.setDepartment("产品研发");
         JSONObject json = JSONObject.fromObject(employer);
         System.out.println("-----------------------------------------beanToJson() 开始------------------------------------------------");
         System.out.println(json.toString());
         System.out.println("-----------------------------------------beanToJson() 结束------------------------------------------------");
     }
    

运行结果如下:

奥门新浦京官方网站 4

  1. 数组转换成json代码

    /**

      * array对象转json
      * @return void
      */
     public static void arrayToJson(){
         Employer employer1=new Employer();
         employer1.setName("小王");
         employer1.setAge(23);
         employer1.setDepartment("产品研发");
    
         Employer employer2=new Employer();
         employer2.setName("小王");
         employer2.setAge(23);
         employer2.setDepartment("产品研发");        
         Employer[] employers=new Employer[]{employer1,employer2};
         JSONArray json = JSONArray.fromObject(employers);
         System.out.println("-----------------------------------------arrayToJson() 开始------------------------------------------------");
         System.out.println(json.toString());
         System.out.println("-----------------------------------------arrayToJson() 结束------------------------------------------------");
     }
    

运行结果如下:

奥门新浦京官方网站 5

  1. List集合转换成json方法

    /**

      * list对象转json
      * @return void
      */
     public static void listToJson(){
         List<String> list = new ArrayList<String>();
         list.add( "first" );
         list.add( "second" );
         JSONArray json = JSONArray.fromObject(list);
         System.out.println("-----------------------------------------listToJson() 开始------------------------------------------------");
         System.out.println(json.toString());
         System.out.println("-----------------------------------------listToJson() 结束------------------------------------------------");
     }
    

运行结果如下:
                                          
奥门新浦京官方网站 6

  1. Map集合转换成json方法

    /**

      * map对象转json
      * @return void
      */
     public static void mapToJson(){
         Map<Object,Object> map = new HashMap<Object,Object>();
         map.put("name", "json");
         map.put("bool", Boolean.TRUE);
         map.put("int", new Integer(1));
         map.put("arr", new String[] { "a", "b" });
         map.put("func", "function(i){ return this.arr[i]; }");
         JSONObject json = JSONObject.fromObject(map);
         System.out.println("-----------------------------------------mapToJson() 开始------------------------------------------------");
         System.out.println(json.toString());
         System.out.println("-----------------------------------------mapToJson() 结束------------------------------------------------");
     }
    

运行结果如下:
                                        
奥门新浦京官方网站 7

有四个步骤:

5.编码实战

四、JSONObject的过滤设置

通常对一个json串和java对象进行互转时,经常会有选择性的过滤掉一些属性值。例如下面的类:

package com.mucfc.json;

public class Employer {

    private String name;

    private Integer age;

    private String department;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDepartment() {
        return department;
    }

    public void setDepartment(String department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "Employer [name=" + name + ", age=" + age + ", department="
                + department + "]";
    }

}

如果我想过滤age属性怎么办?

方法一:实现JSONString接口

package com.mucfc.json;

import net.sf.json.JSONString;

public class Employer implements JSONString{

    private String name;

    private Integer age;

    private String department;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDepartment() {
        return department;
    }

    public void setDepartment(String department) {
        this.department = department;
    }

    @Override
    public String toString() {
        return "Employer [name=" + name + ", age=" + age + ", department="
                + department + "]";
    }

    @Override
    public String toJSONString() {
        return "{"name":"" + name + "","department":"" + department + ""}";
    }

}

奥门新浦京官方网站 8

方法二:设置jsonconfig实例,对包含和需要排除的属性进行添加或删除。

  /**
     * bean对象转json,带过滤器
     * @return void
     */
    public static void beanToJson1(){
        Employer employer=new Employer();
        employer.setName("小王");
        employer.setAge(23);
        employer.setDepartment("产品研发");
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.setExcludes(new String[]
        { "age" });
        JSONObject json = JSONObject.fromObject(employer, jsonConfig);
        System.out.println("-----------------------------------------beanToJson1()带过滤器 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------beanToJson1()带过滤器 结束------------------------------------------------");
    }

奥门新浦京官方网站 9

方法三:使用propertyFilter实例过滤属性

 /**
     * bean对象转json,带过滤器
     * @return void
     */
    public static void beanToJson2(){
        Employer employer=new Employer();
        employer.setName("小王");
        employer.setAge(23);
        employer.setDepartment("产品研发");
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.setJsonPropertyFilter(new PropertyFilter() {
            public boolean apply(Object source, String name, Object value)
            {
                return source instanceof Employer && name.equals("age");
            }
        });
        JSONObject json = JSONObject.fromObject(employer, jsonConfig);
        System.out.println("-----------------------------------------beanToJson2() 带过滤器 开始------------------------------------------------");
        System.out.println(json.toString());
        System.out.println("-----------------------------------------beanToJson2() 带过滤器 结束------------------------------------------------");
    }

奥门新浦京官方网站 10

java工程下载

  • 步骤0:准备数据
  • 步骤1:引用JS和PHP文件
  • 步骤2:创建图表对象
  • 步骤3:渲染图表

6.扩展思考

生成的的的Json的有几种方式,他们之间的好处和坏处分别是什么?

五、JavaScript中使用JSON

       
本节工程免费下载

        JSON 最常见的用法之一,是从 web 服务器上读取 JSON
数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript
对象,然后在网页中使用该数据。

之前我一直有个困惑,分不清普通字符串

1、json字符串和json对象的区别。
字符串:这个很好解释,指使用“”双引号或’’单引号包括的字符。例如:var
comStr = ‘this is string’;
json字符串:指的是符合json格式要求的js字符串。例如:var jsonStr =
“{StudentID:’100′,Name:’tmac’,Hometown:’usa’}”;
json对象:指符合json格式要求的js对象。例如:var jsonObj = { StudentID:
“100”, Name: “tmac”, Hometown: “usa” };

2、JSON 实例 – 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

        由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval()
可用于将 JSON 文本转换为 JavaScript 对象。eval() 函数使用的是 JavaScript
编译器,可解析 JSON 文本,然后生成 JavaScript
对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

如下格式:

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <br> 
Last Name: <br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

var obj = eval ("(" + txt + ")");

document.getElementById("fname").innerHTML=obj.employees[1].firstName 
document.getElementById("lname").innerHTML=obj.employees[1].lastName 
</script>
</body>
</html>       

输出结果:

奥门新浦京官方网站 11

不过eval解析json有安全隐患!现在大多数浏览器(IE8及以上,Chrome和Firefox差不多全部)自带原生JSON对象,提供JSON.parse()方法解析JSON,提供JSON.stringify()方法生成JSON,请使用这两个方法!

如果担心parse()对对象抛异常,可以加一个封装函数:

JSON.pParse = function( tar ) {
    if( typeof( tar ) === 'string' ) {
        return JSON.parse( tar );
    } else {
        return tar;
    }
};

1、从JSON中读数据

//1,从JSON中读数据
function ReadJSON() {
    alert(obj.key1); 
    alert(obj.key2); 

    alert(obj.person[0].name); //或者alert(obj.person[0]["name"])
    alert(obj.object.msg); //或者alert(obj.object["msg"])
}

奥门新浦京官方网站 12

2、增加JSON中的数据

function Add() { 
    //往JSON对象中增加了一条记录
    obj.sex= "男" //或者obj["sex"]="男"
    alert(obj.sex);
}

奥门新浦京官方网站 13

3、更新JSON中的数据
function Update() {
    obj.count = 10; //或obj[“count”]=10
}

奥门新浦京官方网站 14

4、删除JSON中的数据

function Delete() {
    delete obj.count;
}

奥门新浦京官方网站 15

5、遍历JSON中的数据

function Traversal() {
    for (var c in obj) {
        console.log(c + ":", obj[c]);
    }
}

奥门新浦京官方网站 16

步骤0:准备数据

由于需要在计划对数据可视化之前,先准备好数据,所以我叫这一步为步骤0,而非步骤-1。

FusionCharts既理解XML,也理解JSON数据格式,不过在本教程中,我们只用JSON。我们将通过转换以下数据为FusionCharts认可的JSON键值来启动我们的教程。

月份 收入
Oct 490000
Nov 900000
Dec 730000

下面是上述数据的JSON表示:

[
    {"label": "Oct", "value": "490000"},
    {"label": "Nov", "value": "900000"},
    {"label": "Dec", "value": "730000"}
]

我们将使用上述数据绘制条形图,并格式化我们的行为。对于其他图表类型,可能会有点复杂。

7.参考文献

参考一:HTTP://json-taglib.sourceforge.net/

参考二:HTTPS://v.qq.com/x/page/q05502dk6ls.html

参考三:HTTP://www.runoob.com/json/json-tutorial.html

参考四:

六、XML与JSON对比

  • XML定义

扩展标记语言 (Extensible Markup Language,
XML),用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。XML使用DTD(document
type
definition)文档类型定义来组织数据;?格式统一,跨平台和语言,早已成为业界公认的标准。
XML是标准通用标记语言(SGML) 的子集,非常适合Web
传输。XML提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

  • JSON定义

JSON(JavaScript Object
Notation)一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式,同时也具备类似于C语言的习惯(包括C,
C++, C#, Java, JavaScript, Perl,
Python等)体系的行为。这些特性使JSON成为理想的数据交换语言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition

  • December 1999的一个子集。

  • XML和JSON优缺点

(1).XML的优缺点
<1>.XML的优点
A.格式统一,符合标准;
B.容易与其他系统进行远程交互,数据共享比较方便。
<2>.XML的缺点
A.XML文件庞大,文件格式复杂,传输占带宽;
B.服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;
C.客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;D.服务器端和客户端解析XML花费较多的资源和时间。

  • JSON的优缺点

<1>.JSON的优点:
A.数据格式比较简单,易于读写,格式都是压缩的,占用带宽小;B.易于解析,客户端JavaScript可以简单的通过eval()进行JSON数据的读取;C.支持多种语言,包括ActionScript,
C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python,
Ruby等服务器端语言,便于服务器端的解析;D.在PHP世界,已经有PHP-JSON和JSON-PHP出现了,偏于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能直接生成JSON格式,便于客户端的访问提取;E.因为JSON格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。
<2>.JSON的缺点
A.没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性;
B.JSON格式目前在Web Service中推广还属于初级阶段。

步骤1:引用依赖性

在这一步中,我们将包括FusionCharts的核心JavaScript库和PHP图表包装程序。

具体是这样做到的:

<? php
// including FusionCharts PHP wrapper
    include(path/to/fusioncharts.php);
?>

<head>
    <!-- FusionCharts core package files -->
    <script type="text/javascript" src="path/to/fusioncharts.js"></script>
</head>

步骤2:创建图表对象

这一步我们要使用FusionCharts的PHP包装程序类为我们的图表 $coolChart 创建一个对象。创建图表对象的语法如下:

$objectName = new FusionCharts("chart type",
              "unique chart ID",
              "Chart Width",
              "Chart Height",
              "HTML Element for Chart",
              "Chart Data Format",
              "Data Source");

下面的图表对象用于我们要在本教程中创建的图表:

$coolChart = new FusionCharts("bar2d", "myCoolPHPChart", "100%", "600",
               "barchart-container", "json",
               '{
                "chart": {
                    "caption": "Monthly revenue for Q4 - 2015",
                    "xAxisName": "Month",
                    //Other Chart Options
                },
                "data": [{
                    "label": "Oct",
                    "value": "490000"
                } //More Chart Data
            }');

上述语法中提到的“Data Source”包含两个对象:

图表对象:包括负责图表交互性和装饰的各种属性。它们中的一些说明如下:

  • showHoverEffect:(布尔型),用于启用或禁用图表中的悬停效果。
  • plotFillHoverColor:(十六进制代码/颜色名称)用来定义鼠标悬停的曲线颜色。
  • plotFillHoverAlpha:(整型)用于定义悬停颜色的透明度。
  • baseFont:(字符串)用于定义图表的字体类型。
  • baseFontSize:(整型)用于设置图表的字体大小。
  • baseFontColor:(十六进制代码/颜色名称)用于设置图表的字体颜色。

数据对象:包括用于每个数据图的标签和它们相应的值。可以被添加到数据对象内的其它属性是:

  • displayValue:(字符串)允许你为特殊的数据图设置自定义的字符串值。
  • link:(字符串)允许你通过数据图链接到网页,drill-down图表或自定义的JavaScript函数来获取更进一步的图表功能。
  • showLabel:(布尔型)用于启用或禁用特定数据图(栏)的标签显示。

有很多可用的自定义选项可以根据你的具体使用情况使用。你可以查看这个庞大的图表属性列表来进行进一步探索。

步骤3:渲染图表

在渲染图表时,我们要定义HTML<div>元素。下面是做法:

<body>
    <div id="barchart-container">Cool Chart on its way!</div>
</body>

要渲染图表,我们将调用render方法用于上面步骤中创建的图表对象。

$coolChart->render();

如果你正确地按照我上面提到的步骤去做,那么现在你应该已经创建好了一个图表。如果你在你的代码中发现任何错误,也可以参阅GitHub代码仓库以获得这个项目的全部源代码。

更多资源

在本教程中,我们在图表对象内直接传递JSON用于图表,但也有其他加载数据的方法。可以参考这个文档页面来了解其他加载数据的方法。

PHP和MySQL被认为是用于服务器端语言和数据库的最好结合之一,目前被许多流行的web应用程序使用。要了解更多有关于它们的用法,可以查看这篇有关如何使用PHP和来自于MySQL数据库数据创建drill-down图表的教程。

PS:欢迎提出有关于本教程的任何问题!

发表评论

电子邮件地址不会被公开。 必填项已用*标注