使用highcharts绘制美观的燃尽图

时间 2019-11-09

标签使用 highcharts 绘制美观繁體版

原文原文链接

使用highcharts绘制美观的燃尽图

助教在博客中介绍了两种绘制燃尽图的方法，可是咱们组在使用时发现有些任务不适合写进issue，并且网站生成的燃尽图不是很美观，所以咱们打算使用其余方法本身绘制燃尽图。通过简单调研，咱们采用了highcharts来展示咱们的燃尽图。javascript

demo与特色

咱们的燃尽图demo以下：
demo
css

咱们的燃尽图具备如下特色：html

1 交互性图表

利用highcharts的交互性，访问者能够和图表进行积极交互，获取更多有效信息，以下所示。java

查询每日工做进度
jquery
比较任意几天的工做状况
ajax
着重显示某条曲线
api
隐藏曲线
服务器

2 配色美观，主题丰富，可定制化程度高

相较于利用网站生成的燃尽图，咱们的图表配色更加美观。此外highchats还支持大量自定义模板与主题，能够自由更换背景，线型，颜色，图表类型，定制图表样式，带来更好的阅读体验。ssh

3 自动化生成，维护简单

咱们经过服务器上一个定时脚本实现了燃尽图的动态更新。该脚本会定时从本项目的石墨文档中提取任务完成状况，加工数据并更新csv文件，而博客中的js脚本则加载这个csv文件进行画图。整个过程自动完成，不须要过多维护。对于使用issues管理的项目也能够自行设计脚本爬取数据更新csv。ide

4 纯js实现，依赖较少

Based on native browser technologies, no plugins needed
官网介绍

经过加载几个js,咱们就可使用highcharts完整的功能。

highcharts介绍

Highcharts 是一个用纯 JavaScript 编写的一个图表库，可以很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，而且免费提供给我的学习、我的网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中不少图表能够集成在同一个图形中造成混合图。
其主要优点（功能特色）有：
兼容性、非商业使用免费、开源、纯 JavaScript、丰富的图表类型、简单的配置语法、动态交互性、支持多坐标轴、数据提示框、方便加载外部数据等等

燃尽图的具体实现方式

网页js需求

首先咱们要开通博客园的js功能，在开通以后，为了使highcharts能正常工做，咱们通常须要加载如下几个脚本与样式：

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

highcharts也支持静态导出图片（以下图），插入这些图片不须要额外的js文件，可是这样的图片就失去了交互性。

highcharts燃尽图具体js脚本

本部分主要介绍咱们的燃尽图使用的具体的js脚本与功能，有条件的读者也能够自行阅读官网demo与说明文档，了解更多内容。

所有js脚本与对应功能介绍以下：

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
    Highcharts.chart('container', {
        chart: {
            scrollablePlotArea: {
                minWidth: 700
            }
        },
        data: {
            csvURL: 'http://example.com/example.csv',
            beforeParse: function (csv) {
                return csv.replace(/\n\n/g, '\n');
            }
        },
        title: {
            text: '燃尽图'
        },
        subtitle: {
            text: '预期完成任务 实际完成任务 每日完成任务'
        },
        xAxis: {
            tickInterval: 1 * 24 * 3600 * 1000, 
            tickWidth: 0,
            gridLineWidth: 1,
            labels: {
                align: 'left',
                x: -10,
                y: 35
            }
        },
        yAxis: [{ // left y axis
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }, { // right y axis
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'right',
                x: -3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }],
        legend: {
            align: 'left',
            verticalAlign: 'top',
            borderWidth: 0
        },
        tooltip: {
            shared: true,
            crosshairs: true
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (e) {
                            hs.htmlExpand(null, {
                                pageOrigin: {
                                    x: e.pageX || e.clientX,
                                    y: e.pageY || e.clientY
                                },
                                headingText: this.series.name,
                                maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' tasks',
                                width: 200
                            });
                        }
                    }
                },
                marker: {
                    lineWidth: 1
                }
            }
        },
        series: [{
            name: 'All tasks',
            lineWidth: 4,
            marker: {
                radius: 4
            }
        }, {
            name: 'New users'
        }]
    });
</script>

设置图表位置

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
    Highcharts.chart('container', {
        chart: {
            scrollablePlotArea: {
                minWidth: 700
            }
        },

首先，咱们要设置图表的目标位置，通常经过一个div实现。在这以后咱们就能够用highcharts修改div内容，进行画图了。

加载数据

highcharts同时支持Ajax加载数据和js硬写数据两种方式，具体方法以下：

data: { // ajax加载数据
        csvURL: 'https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/analytics.csv',
        beforeParse: function (csv) {
            return csv.replace(/\n\n/g, '\n');
        }
    },
//------------------------------------------------------------------------
    series: [{ // 加载硬写进js的数据
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

咱们使用的是第一种方法，主要缘由有：

第一种方法代码较短，更加清晰
使用csv能更好的配合自动化脚本

修改曲线的颜色也能够在series中进行。

设置标题，次标题，图例

title: {
        text: '燃尽图'
    },
    subtitle: {
        text: '预期完成任务 实际完成任务 每日完成任务'
    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        borderWidth: 0
    },

highcharts支持自定义标题，次标题，图例的文字，内容，样式，位置等，具体参数能够参考api文档。通常经常使用的是经过text修改内容，align，verticalAlign设置位置等。

设置x，y轴坐标与刻度

xAxis:{
        tickInterval: 1 * 24 * 3600 * 1000,
        tickWidth: 0,
        gridLineWidth: 1,
        labels: {
            align: 'left',
            x: -10,
            y: 35
        }
    },
    yAxis: [{ // left y axis
        title: {
            text: null
        },
        labels: {
            align: 'left',
            x: 3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }, { // right y axis
        linkedTo: 0,
        gridLineWidth: 0,
        opposite: true,
        title: {
            text: null
        },
        labels: {
            align: 'right',
            x: -3,
            y: 16,
            format: '{value:.,0f}'
        },
        showFirstLabel: false
    }],

highcharts能够分别设置x，y轴坐标与内容，同时支持次坐标轴，而且对于刻度为时间的坐标轴支持较好。

经过title能够设置坐标内容，经过labels能够设置刻度显示的内容，对齐位置与偏移量，tickInterval则支持以时间为单位的坐标。

用户交互设计

plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function (e) {
                        hs.htmlExpand(null, {
                            pageOrigin: {
                                x: e.pageX || e.clientX,
                                y: e.pageY || e.clientY
                            },
                            headingText: this.series.name,
                            maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' + this.y + ' tasks',
                            width: 200
                        });
                    }
                }
            },
            marker: {
                lineWidth: 1
            }
        }
    },

经过这部分代码能够控制用户鼠标焦点在图片中移动时显示的辅助性内容。例如上面的例子能够用来显示鼠标焦点所在的位置的任务数，并进行了格式化输出。

写在后面

以上基本就是咱们使用highcharts实现咱们的燃尽图的方式了。固然做为一个强大的图表工具，highcharts的功能，支持的图表远不止这些，彻底能够用在咱们的网站中，带来更好的展现效果。