奥门新浦京官方网站PHP创建一个炫酷的图表

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

大家好,我是IT修真院上海分院第一期的学员唐坤,一枚正直纯洁善良的java程序员

Json的简介

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

今天给大家分享一下,SAY SAY JSON?

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

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

背景介绍:

Json的优点

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

什么是JSON

  1. 数据格式比较简单,易于读写,格式都是压缩的,占用带宽小
  2. 易于解析,客户端JavaScript可以简单的通过eval()进行JSON数据的读取;
  3. 支持多种语言,包括ActionScript, C, C#, ColdFusion, Java,
    JavaScript, Perl, PHP, Python,
    Ruby等服务器端语言,便于服务器端的解析;
  4. 在PHP世界,已经有PHP-JSON和JSON-PHP出现了,偏于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能直接生成JSON格式,便于客户端的访问提取;
  5. 因为JSON格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。

奥门新浦京官方网站 1

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript
Programming Language, Standard ECMA-262 3rd Edition – December
1999的一个子集。
JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,
C++, C#, Java, JavaScript, Perl, Python等)。
这些特性使JSON成为理想的数据交换语言。

传统操作Json

有四个步骤:

1.背景介绍

很多.NET开发程序员或多或少都会遇到操作Json字符串的情况,一般来说,我们都是先定义一个和Json格式相匹配的类,然后将json字符串反序列化成对象,这样便于我们编程使用,由于.NET是强类型语言,Json又是多变的,非常灵活的,导致服务器端定义的json序列化类越来越多,操作也及其不便。特别是对多层嵌套的json更是头疼。此次不再过多声明,.NET程序员用过都明白。

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

什么是JSON

简易操作Json

步骤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"}
]

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

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript
Programming Language, Standard ECMA-262 3rd Edition – December
1999的一个子集。
JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,
C++, C#奥门新浦京官方网站,, Java, JavaScript, Perl, Python等)。
这些特性使JSON成为理想的数据交换语言。

DynamicJson是专门为.NET程序员开发的Json操作库,其源码非常简单,仅仅只有400行代码,一个对应的class类,目前只支持.NET
4.0以上的.NET Framework。

步骤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>

JSON建构于两种结构:

如何在项目中使用DynamicJson

步骤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:(布尔型)用于启用或禁用特定数据图(栏)的标签显示。

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

“名称/值”对的集合(A collection of name/value
pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash
table),有键列表(keyed list),或者关联数组 (associative array)。

直接通过Nuget安装

步骤3:渲染图表

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

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

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

$coolChart->render();

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

值的有序列表(An ordered list of
values)。在大部分语言中,它被理解为数组(array)。

PM > Install-Package DynamicJson

更多资源

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

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

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

2.知识剖析

下载DynamicJson.dll,然后在项目中添加引用,下载地址如下:

JSON建构于两种结构:

“名称/值”对的集合(A collection of name/value
pairs)。不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash
table),有键列表(keyed list),或者关联数组 (associative array)。

读取、获取

值的有序列表(An ordered list of
values)。在大部分语言中,它被理解为数组(array)。

// 将Json字符串解析成DynamicJson对象
var json = DynamicJson.Parse(@"{""foo"":""json"", ""bar"":100, ""nest"":{ ""foobar"":true } }");

var r1 = json.foo; // "json" - string类型
var r2 = json.bar; // 100 - double类型
var r3 = json.nest.foobar; // true - bool类型
var r4 = json["nest"]["foobar"]; // 还可以和javascript一样通过索引器获取

2.知识剖析

判断,新增,更新,删除,替换,还可以输出新的Json字符串

JSON究竟是什么东西?为什么JSON就是易于数据交换?

// 将Json字符串解析成DynamicJson对象
      var json = DynamicJson.Parse(@"{""foo"":""json"", ""bar"":100, ""nest"":{ ""foobar"":true } }");

      // 判断json字符串中是否包含指定键
      var b1_1 = json.IsDefined("foo"); // true
      var b2_1 = json.IsDefined("foooo"); // false
      // 上面的判断还可以更简单,直接通过json.键()就可以判断
      var b1_2 = json.foo(); // true
      var b2_2 = json.foooo(); // false;


      // 新增操作
      json.Arr = new string[] { "NOR", "XOR" }; // 新增一个js数组
      json.Obj1 = new { }; // 新增一个js对象
      json.Obj2 = new { foo = "abc", bar = 100 }; // 初始化一个匿名对象并添加到json字符串中

      // 删除操作
      json.Delete("foo");
      json.Arr.Delete(0);
      // 还可以更简单去删除,直接通过json(键); 即可删除。
      json("bar");
      json.Arr(1);

      // 替换操作
      json.Obj1 = 5000;

      // 创建一个新的JsonObject
      dynamic newjson = new DynamicJson();
      newjson.str = "aaa";
      newjson.obj = new { foo = "bar" };

      // 直接序列化输出json字符串
      var jsonstring = newjson.ToString(); // {"str":"aaa","obj":{"foo":"bar"}}

一种数据格式

遍历

什么是格式?就是规范你的数据要怎么表示,举个栗子,有个人叫“二百六”,身高“160cm”,体重“60kg”,现在你要将这个人的这些信息传给别人或者别的什么东西,你有很多种选择:

// 直接遍历json数组
      var arrayJson = DynamicJson.Parse(@"[1,10,200,300]");
      foreach (int item in arrayJson)
      {
        Console.WriteLine(item); // 1, 10, 200, 300
      }

      // 直接遍历json对象
      var objectJson = DynamicJson.Parse(@"{""foo"":""json"",""bar"":100}");
      foreach (KeyValuePair<string, dynamic> item in objectJson)
      {
        Console.WriteLine(item.Key + ":" + item.Value); // foo:json, bar:100
      }

姓名“二百六”,身高“160cm”,体重“60kg”

转换和反序列化

name=”二百六”&height=”160cm”&weight=”60kg”

public class FooBar
    {
      public string foo { get; set; }
      public int bar { get; set; }
    }

var arrayJson = DynamicJson.Parse(@"[1,10,200,300]");
      var objectJson = DynamicJson.Parse(@"{""foo"":""json"",""bar"":100}");

      // 将json数组转成C#数组
      // 方法一:
      var array1 = arrayJson.Deserialize<int[]>();
      // 方法二
      var array2 = (int[])arrayJson;
      // 方法三,这种最简单,直接声明接收即可,推荐使用
      int[] array3 = arrayJson;

      // 将json字符串映射成C#对象
      // 方法一:
      var foobar1 = objectJson.Deserialize<FooBar>();
      // 方法二:

      var foobar2 = (FooBar)objectJson;
      // 方法三,这种最简单,直接声明接收即可,推荐使用
      FooBar foobar3 = objectJson;

      // 还可以通过Linq进行操作
      var objectJsonList = DynamicJson.Parse(@"[{""bar"":50},{""bar"":100}]");
      var barSum = ((FooBar[])objectJsonList).Select(fb => fb.bar).Sum(); // 150
      var dynamicWithLinq = ((dynamic[])objectJsonList).Select(d => d.bar);

{“name”:”二百六”,”height”:160,”weight”:60}

序列化成json字符串

… …
以上所有选择,传递的数据是一样的,但是你可以看到形式是可以各式各样的,这就是各种不同格式化后的数据,JSON是其中一种表示方式。

// 声明一个匿名对象
      var obj = new
      {
        Name = "Foo",
        Age = 30,
        Address = new
        {
          Country = "Japan",
          City = "Tokyo"
        },
        Like = new[] { "Microsoft", "Xbox" }
      };
      // 序列化
      // {"Name":"Foo","Age":30,"Address":{"Country":"Japan","City":"Tokyo"},"Like":["Microsoft","Xbox"]}
      var jsonStringFromObj = DynamicJson.Serialize(obj);

      // 还支持直接序列化数组,集合
      // [{"foo":"fooooo!","bar":1000},{"foo":"orz","bar":10}]
      var foobar = new FooBar[] {
        new FooBar { foo = "fooooo!", bar = 1000 },
        new FooBar { foo = "orz", bar = 10 }
      };
      // 序列化
      var jsonFoobar = DynamicJson.Serialize(foobar);
  

JSON究竟是什么东西?为什么JSON就是易于数据交换?

其他(冲突问题,编译不通过问题)

一种数据格式

var nestJson = DynamicJson.Parse(@"{""tes"":10,""nest"":{""a"":0}");

      nestJson.nest(); // 判断是否存在nest属性
      nestJson.nest("a"); // 删除nest属性中的a属性

      // 处理json中的键和C#的类型冲突导致编译失败,或语法提示错误,只需要在前面加@前缀即可
      var json = DynamicJson.Parse(@"{""int"":10,""event"":null}");
      var r1 = json.@int; // 10.0
      var r2 = json.@event; // null

什么是格式?就是规范你的数据要怎么表示,举个栗子,有个人叫“二百六”,身高“160cm”,体重“60kg”,现在你要将这个人的这些信息传给别人或者别的什么东西,你有很多种选择:

例子一:TwitterAPI

姓名“二百六”,身高“160cm”,体重“60kg”

static void Main()
{
  var publicTL = new WebClient().DownloadString(@"http://twitter.com/statuses/public_timeline.json");
  var statuses = DynamicJson.Parse(publicTL);
  foreach (var status in statuses)
  {
    Console.WriteLine(status.user.screen_name);
    Console.WriteLine(status.text);
  }
}
  

name=”二百六”&height=”160cm”&weight=”60kg”

例子二:TwitterAPI2

{“name”:”二百六”,”height”:160,”weight”:60}

static void Main(string[] args)
{
  var wc = new WebClient();
  var statuses = Enumerable.Range(1, 5)
    .Select(i =>
      wc.DownloadString("http://twitter.com/statuses/user_timeline/neuecc.json?page=" + i))
    .SelectMany(s => (dynamic[])DynamicJson.Parse(s))
    .OrderBy(j => j.id);

  foreach (var status in statuses)
  {
    Console.WriteLine(status.text);
  }
}
  

… …
以上所有选择,传递的数据是一样的,但是你可以看到形式是可以各式各样的,这就是各种不同格式化后的数据,JSON是其中一种表示方式。

看到这里,是不是觉得很爽,赶快让你的项目集成DynamicJson吧。

基于文本的数据格式

您可能感兴趣的文章:

  • javascript
    JSON操作入门实例
  • Json对象与Json字符串互转(4种转换方式)
  • js
    将json字符串转换为json对象的方法解析
  • js中将字符串转换成json的三种方式
  • 解析JSON对象与字符串之间的相互转换
  • JSON.stringify
    语法实例讲解
  • JS对象与JSON格式数据相互转换
  • Json序列化和反序列化方法解析
  • 浅析JSON序列化与反序列化
  • JS实现json的序列化和反序列化功能示例
  • JavaScript常见JSON操作实例分析

JSON是基于文本的数据格式,相对于基于二进制的数据,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是什么我们第二部分再说)的字符串,我们常会称为“JSON字符串”。

轻量级的数据格式

在JSON之前,有一个数据格式叫xml,现在还是广泛在用,但是JSON更加轻量,如xml需要用到很多标签,像上面的例子中,你可以明显看到xml格式的数据中标签本身占据了很多空间,而JSON比较轻量,即相同数据,以JSON的格式占据的带宽更小,这在有大量数据请求和传递的情况下是有明显优势的

基于文本的数据格式

JSON是基于文本的数据格式,相对于基于二进制的数据,所以JSON在传递的时候是传递符合JSON这种格式(至于JSON的格式是什么我们第二部分再说)的字符串,我们常会称为“JSON字符串”。

轻量级的数据格式

在JSON之前,有一个数据格式叫xml,现在还是广泛在用,但是JSON更加轻量,如xml需要用到很多标签,像上面的例子中,你可以明显看到xml格式的数据中标签本身占据了很多空间,而JSON比较轻量,即相同数据,以JSON的格式占据的带宽更小,这在有大量数据请求和传递的情况下是有明显优势的。

被广泛地用于数据交换

轻量已经是一个用于数据交换的优势了,但更重要的JSON是易于阅读、编写和机器解析的,即这个JSON对人和机器都是友好的,而且又轻,独立于语言(因为是基于文本的),所以JSON被广泛用于数据交换。

以前端JS进行ajax的POST请求为例,后端PHP处理请求为例:

前端构造一个JS对象,用于包装要传递的数据,然后将JS对象转化为JSON字符串,再发送请求到后端;

后端PHP接收到这个JSON字符串,将JSON字符串转化为PHP对象,然后处理请求。

可以看到,相同的数据在这里有3种不同的表现形式,分别是前端的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象明显不是一个东西,但是由于大家用的都是JSON来传递数据,大家都能理解这种数据格式,都能把JSON这种数据格式很容易地转化为自己能理解的数据结构,这就方便啦,在其他各种语言环境中交换数据都是如此。

被广泛地用于数据交换

轻量已经是一个用于数据交换的优势了,但更重要的JSON是易于阅读、编写和机器解析的,即这个JSON对人和机器都是友好的,而且又轻,独立于语言(因为是基于文本的),所以JSON被广泛用于数据交换。

以前端JS进行ajax的POST请求为例,后端PHP处理请求为例:

前端构造一个JS对象,用于包装要传递的数据,然后将JS对象转化为JSON字符串,再发送请求到后端;

后端PHP接收到这个JSON字符串,将JSON字符串转化为PHP对象,然后处理请求。

可以看到,相同的数据在这里有3种不同的表现形式,分别是前端的JS对象、传输的JSON字符串、后端的PHP对象,JS对象和PHP对象明显不是一个东西,但是由于大家用的都是JSON来传递数据,大家都能理解这种数据格式,都能把JSON这种数据格式很容易地转化为自己能理解的数据结构,这就方便啦,在其他各种语言环境中交换数据都是如此。

JSON数据类型

Number 数字型 String 字符串型 Boolean 布尔型 Array 数组 Object 对象 null
空值

(1)json中不区分整数、小数等类型,而统一使用Number来存储数字。

(2)Array表示数组,以中括号”[]”括起来,元素之间以逗号分隔,元素可以为任意类型。

(3)Object表示对象,类似于C语言中的结构体,以花括号”{}”括起来,其元素要求为键值对,key必须为String类型的,而value则可为任意类型。key和value之间以”:”表示映射关系,元素之间也是以逗号分隔。

拓展思考

XML和JSON优缺点

拓展思考

XML和JSON优缺点

<1>.XML的优点   A.格式统一,符合标准;

B.容易与其他系统进行远程交互,数据共享比较方便。

<2>.XML的缺点   A.XML文件庞大,文件格式复杂,传输占带宽;

B.服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;

C.客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;

D.服务器端和客户端解析XML花费较多的资源和时间。

<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>.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中推广还属于初级阶段。

<2>.JSON的缺点

A.没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性;

B.JSON格式目前在Web Service中推广还属于初级阶段。

7.参考文献

参考一:百度

参考二:小课堂

8.更多讨论

欢迎大家交流和讨论

参考文献

参考:百度

文本链接:文本链接

视频链接:视频地址

今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~


技能树.IT修真院

“我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,掌控自己学习的节奏,学习的路上不再迷茫”。

这里是技能树.IT修真院,成千上万的师兄在这里找到了自己的学习路线,学习透明化,成长可见化,师兄1对1免费指导。快来与我一起学习吧 !

发表评论

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