制作报表工具制作报表工具

两种制作报表工具

分别是hcharts和echarts

工具的特性：

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
详细介绍：http://echarts.baidu.com/feature.html

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。

Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
详细介绍：https://www.hcharts.cn/products/highcharts

补充：Highstock 比 Highcharts 多了设置时间范围等功能，例如zabbix，就需要设置时间范围。

Highstock 是用纯 JavaScript 编写的股票图表控件，可以开发股票走势或大数据量的时间轴图表。它包含多个高级导航组件：预设置数据时间范围，日期选择器、滚动条、平移、缩放功能。

Hcharts官网:

https://www.hcharts.cn/

Hcharts API文档：

https://api.hcharts.cn/highcharts

Hcharts在线示例：

https://www.hcharts.cn/demo/highcharts

Echarts官网：

http://echarts.baidu.com

Echarts API文档:

http://echarts.baidu.com/api.html#echarts

Echarts在线示例：

http://echarts.baidu.com/examples.html

Highcharts JS代码说明：以基本折线图为例

配置选项：主要分为两部分，分别是 全局配置、主配置。

- 全局配置
Highcharts.setOptions({
    global: {
        useUTC: false // false表示关闭UTC时间
    }
});

- 主配置
var chart = new Highcharts.Chart(\'id1\', { // 创建一个hchat对象

// 图表标题
title: {                                  
    text: \'不同城市的月平均气温\',
    x: 0
},

// 图表副标题
subtitle: {
    text: \'数据来源: WorldClimate.com\',
    x: 0
},

// 关于图表区和图形区的参数及一般图表通用参数。
chart: {
    events: {
        load: function (e) {
            // 图标加载时，执行的函数,
        }
    }
},

// Highchart默认在图表的右下角放置版权信息的标签
credits: {
    enable: true,
    position: {
        align: \'right\',
        verticalAlign: \'bottom\'
    },
    text: \'老男孩\',
    href: \'http://www.oldboyedu.com\'
},

// 图例说明是包含图表中数列标志和名称的容器。
legend: {
    layout: \'vertical\',
    align: \'right\',
    verticalAlign: \'middle\',
    borderWidth: 1
},

// X轴
xAxis: {
    // categories: [\'1.1\', \'二月\', \'三月\', \'四月\', \'五月\', \'六月\', \'七月\', \'八月\', \'九月\', \'十月\', \'十一月\', \'十二月\'],
    type: \'datetime\',
    labels: {
        formatter: function () {
            return Highcharts.dateFormat(\'%Y-%m-%d %H:%M:%S\', this.value);
        },
        rotation: 30
    }

},

// Y轴
yAxis: {
    title: {
        text: \'数值\'
    }
},

// 数据提示框
tooltip: {
    valueSuffix: \'个\',
    xDateFormat: "%Y-%m-%d %H:%M:%S",
    pointFormatter: function (e) {
        var tpl = \'<span style="color:\' + this.series.color + \'">●</span> \' + this.series.name + \': <b>\' + this.y + \'</b><br/>\';
        return tpl;
    },
    valueDecimals: 1,
    useHTML: true
},

// 数据列配置
plotOptions: {
    series: {
        cursor: \'pointer\',
        events: {
            click: function (event) {
                // 点击某个指定点时，执行的事件
                console.log(this.name, event.point.x, event.point.y);
            }
        }
    }
},

// 图表的数据列
series: [{
    name: \'东京\',
    // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    data: [
        [1501689804077.358, 8.0],
        [1501689814177.358, 6.9],
        [1501689824277.358, 16.9],
        [1501689834377.358, 11.9]
    ]
},
    {
        name: \'洛杉矶\',
        // data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        data: [
            [1501689804077.358, 18.0],
            [1501689814177.358, 16.9],
            [1501689824277.358, 26.9],
            [1501689834377.358, 9.9]
        ]
    }]
});

// chart.addSeries({name:\'北京\',data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]});
// 参数：数值；是否重绘; isShift; 是否动画
// chart.series[0].addPoint(18);
// chart.series[0].addPoint([12]);
// chart.series[0].addPoint([v.x, v.y]);
// 参数：是否重绘
// chart.series[0].remove(false);
// 更新饼图
// $(\'#id1\').highcharts().series[0].data[0].update({x: 0, y: 100})

示例代码：

基本折线图示例代码

注：Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表。

hcharts在报障系统中得应用

下载安装包：http://img.hcharts.cn/zips/Highcharts-5.0.12.zip

解压后，打开index.html进行选择

报障系统示例代码：https://files.cnblogs.com/files/luchuangao/rbacdemo.zip