使用Chartjs创建极区图/Chartjs tutorial:Create a polar area chart

Summary:
Chartjs is a very popular open source chart code.Today I'll show you how to use chartjs to create a polar area chart.
Chartjs是一个非常流行的开源图表库。今天我刚教大家如何通过它创建极区图。即使你不会HTML5或者没有相关的代码基础，一样可以使用它创建极区图。
首先，我们先看一个例子：

实现它部分代码如下：

{
  "type": "polarArea",
  "data": {
    "datasets": [
      {
        "data": [
          11,
          16,
          7,
          3,
          14
        ],
        "backgroundColor": [
          "#FF6384",
          "#4BC0C0",
          "#FFCE56",
          "#E7E9ED",
          "#36A2EB"
        ],
        "label": "极区图样例"
      }
    ],
    "labels": [
      "Red",
      "Green",
      "Yellow",
      "Grey",
      "Blue"
    ]
  },
  "options": {}
}

1.使用的开发工具

很明显透过上述代码可以看出，没有进行js定义，没有html，也就是这仅仅是对数据，样式进行简单处理的代码。chartjs可以说是一个图表引擎，任何工具网站都可以搭载它，如果我们在已经搭载它的工具上面创建图表，就可以不需要考虑调用js等问题，直接通过书写chartjs的相关代码就可以实现生成图表。本次演示的工具是Markdown plus，当然也有网页版本，其网址为：http://mdp.tylingsoft.com/

2.语法格式

因为我们是借助于一款markdown编辑器的扩展功能实现chartjs图表创建，所以我们的代码输入仍然需要遵循markdown的格式，如下：

····chart
此处为chartjs代码块
····   
英文状态下的顿号

下面让我们来看下chartjs的代码部分：
主体部分分为四个参数区域：
1.data 数据

"data": [
          11,
          16,
          7,
          3,
          14
        ],

极区图是根据类别的数据比例生成的，所以每个类别对应一个数值，之间用逗号隔开。
2.backgroundColor 背景颜色

 "backgroundColor": [
          "#FF6384",
          "#4BC0C0",
          "#FFCE56",
          "#E7E9ED",
          "#36A2EB"
        ],

每个类别根据数值比例不同，区域大小不同，需要通过颜色来对每个区域进行区分，颜色代码需要用双引号括起来，以逗号间隔。 颜色代码可到 http://www.114la.com/other/rgb.htm 查看
3.label
可以看作是标题，属于图表的一个属性

 "label": "极区图样例"

4.labels 类别名称

 "labels": [
      "Red",
      "Green",
      "Yellow",
      "Grey",
      "Blue"
    ]

总的结构如下：

{
  "type": "polarArea",
  "data": {
    "datasets": [
      {
        "data": [
          数据
        ],
        "backgroundColor": [
       颜色
        ],
        "label": "极区图样例"
      }
    ],
    "labels": [
      名称
    ]
  },
  "options": {}
}

只要按照这个结构输入相关参数，就可以直接输出极区图，本文样例是使用5个类别，下面我将使用10个类别做演示：

本次教程到此结束，谢谢阅读。

---

Posted on Utopian.io - Rewarding Open Source Contributors

---