使用hcharts创建可变宽度环形图/How to use hcharts to make a fluid-width ring chart

Summary:
Javascript has a lot of open source chart Libraries,Hcharts.js is one of them,today i will show you how to create a fluid-width bar chart by Hcharts.
Javascript 有很多开源图表库，Hcharts.js就是其中之一，今天教程将教大家如何使用Hcharts.js去绘制一张可变宽度环形图。

通常的环形图只能比较一种类型数据，如果收入占比啊等等，但是如果我们需要看看收入占比的同时，观察下年龄差距，这个时候，就得使用可变宽度的环形图。

• 兼容浏览器：IE, Chrome,Firefox等等

您能从本教程学到什么?

• 怎么调用hcharts.js
• 怎么设置图表画布大小和配置chart参数
• 怎么设置图表主副标题
• 怎么设置数据点属性
• 怎么设置数据列

需要的准备条件

• 你需要一个代码编辑器，比如atom，EmEditor等等,当然因为是文本编辑，可以直接通过浏览器打开，typora这类文本编辑器也可以进行代码编辑。
• 你需要下载hcharts.js

本教程难度

相对来说比较简单，只需要对固定代码格式有些简单了解，就可以绘制可变宽度环形图。

• 认识简单代码
• 认识简单英文

教程内容

下面请先看一个简单例子：

要点1：怎么调用hcharts.js

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

如果本地没有hcharts.js库，可以使用其在线js资源，同时需要加载jquery.min.js。直接在head区域引用就可以了。

要点2：怎么设置图表画布大小以及配置chart

<div id="container" style="max-width:800px;height:400px"></div>

在body区域，编辑chartjs代码之前，需要先定义下图表的大小。上面代码定义，最大宽度为800px，高为400px。

在本样例中，并没有定义画布大小：< div id="container">< /div>

 chart: {
        type: 'variablepie'
    },

需要设置的参数只有一个，type，图表类型。默认值为 "line"。这里是可变宽环形图，所以设置为variablepie。

要点3：怎么设置图表主副标题以及标题位置

 title: {
        text: 'steemit 7 USERS/rep vs sp'
    },

title:主标题，在text后面输入标题文本，使用单引号括起来。

subtitle: {
        text: 'This is a demo ,by @jubi<br/><b>support html</b> like"br/b/i/u"'  
    },

要点4：怎么设置数据点属性

tooltip: {
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
        'SP: <b>{point.y}</b><br/>' +
        'REP: <b>{point.z}</b><br/>'
    },

hearderFormat：数据点显示窗口，抬头显示，可以用作标题之用。可以输入< br/>标签进行换行。

pointFormat：数据点显示窗口，显示主体。{point.color}数据颜色，{point.name}数据名称，{point.y}数据的y值，{point.z}数据的z值。 支持插入html标签。

要点5：怎么设置数据列

  series: [{
        minPointSize: 10,
        innerSize: '20%',
        zMin: 0,
        name: 'countries',
        data: [{
            name: 'user1',
            y: 115370,
            z: 25
        }]
    }]
});

minPointSize：最小数据点尺寸，数值越大，图表越大，数据之间差距越小。

innerSize：中间环占比，比例越大，中间环越大，数据之间差距越小。

• innerSize：30%：

• innerSize：60%

name：数据主体名称

zmin: 数据的z值 最小计数，本例子数据的z值皆低于100，最低25，所以此处设置最低为0，如果数据过大，zmin可适当提高。下面我将zmin设置为100看看效果。（注：本数据z值最大为：70）

可看到z值 数据看不到差距了，因为大家都处于zmin之下。

  data: [{
            name: 'user1',
            y: 115370,
            z: 25
     }]

data：数据，格式为 data: [{name:'name'},y:data1,z:data2]

多个数据格式：

data: [{
            name: 'user1',
            y: 115370,
            z: 25
        }, {
            name: 'user2',
            y: 55100,
            z: 50
        }
     }]

下面请看完整实例

Highcharts.chart('container', {
    chart: {
        type: 'variablepie'
    },
    title: {
        text: 'steemit 14 USERS/rep vs sp'
    },
    subtitle: {
        text: 'This is a demo ,by @jubi<br/><b>support html</b> like"br/b/i/u"'  
    },
    tooltip: {
        headerFormat: 'Here is "headerFormat"<br/>',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
        'SP: <b>{point.y}</b><br/>' +
        'REP: <b>{point.z}</b><br/>'
    },
    series: [{
        minPointSize: 20,
        innerSize: '20%',
        zMin: 0,
        name: 'username',
        data: [{
            name: 'user1',
            y: 115370,
            z: 25
        }, {
            name: 'user2',
            y: 55100,
            z: 50
        }, {
            name: 'user3',
            y: 32685,
            z: 55
        }, {
            name: 'user4',
            y: 18867,
            z: 60
        }, {
            name: 'user5',
            y: 3040,
            z: 63
        }, {
            name: 'user6',
            y: 4277,
            z: 57
        }, {
            name: 'user7',
            y: 22277,
            z: 25
        }, {
            name: 'user8',
            y: 21277,
            z: 57
        }, {
            name: 'user9',
            y: 11277,
            z: 65
        }, {
            name: 'user10',
            y: 6277,
            z: 72
        }, {
            name: 'user11',
            y: 7277,
            z: 63
        }, {
            name: 'user12',
            y: 1277,
            z: 66
        }, {
            name: 'user13',
            y: 42717,
            z: 73
        }, {
            name: 'user14',
            y: 3022,
            z: 70
        }]
    }]
});

本教程到此结束，感谢您的阅读。

系列教程列表

• 使用hcharts创建3D饼图/How to use hcharts to make a 3D Pie chart
• 使用hcharts创建扇形统计图/How to use hcharts to make a fan-shaped chart
• 使用hcharts创建工作进度(甘特)图/How to use hcharts to make a gantt chart
• 使用hcharts创建折线图/How to use hcharts to make a fold line chart
• 使用hcharts创建气泡图/How to use hcharts to make a bubble chart
• 使用hcharts创建堆叠条形图/How to use hcharts to make a stacked bar chart
• 使用hcharts创建金字塔图/How to use hcharts to make a pyramidal chart
• 使用hcharts创建可变宽度柱形图/How to use hcharts to make a fluid-width bar chart

---

Posted on Utopian.io - Rewarding Open Source Contributors

---