您的位置：首页 > 其它

制作报表工具

2017-07-25 23:52 337 查看

两种制作报表工具

分别是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})

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="i1"></div>

<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/Highcharts-5.0.12/code/highcharts.js"></script>
<script>
// jQuery == $
Highcharts.setOptions({
global: {
useUTC: false
}
});

var chart = new Highcharts.Chart('i1',{
title: {
text: '大标题',
x: 0
},
subtitle: {
text: '数据来源: WorldClimate.com',
x: 0
},
chart: {
events: {
load: function (e) {
// 图标加载时，执行的函数
}
}
},
credits: {
enable: true,
position: {
align: 'right',
verticalAlign: 'bottom'
},
text: '老男孩',
href: 'http://www.oldboyedu.com'
},

xAxis: {
// 适用于固定x轴
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.value);
},
rotation: 30
}
},
yAxis: {
title: {
text: '数值'
}
},
tooltip: {
pointFormatter: function (e) {
var tpl = '<span style="color:' + this.series.color + '">哦哦哦哦哦小</span> ' + this.series.name + ': <b>' + this.y + '个</b><br/>';
return tpl;
},
useHTML: true
},
plotOptions: {
series: {
cursor: 'pointer',
events: {
click: function (event) {
// 点击某个指定点时，执行的事件
console.log(this.name, event.point.x, event.point.y);
}
}
}
},
series: [
{
name: '洛杉矶',
data: [
[1501689804077.358, 8.0],
[1501689814177.358, 6.9],
[1501689824277.358, 16.9],
[1501689834377.358, 11.9]
]
},
{
name: '南京',
data: [
[1501689804077.358, 18.0],
[1501689814177.358, 16.9],
[1501689824277.358, 6.9],
[1501689834377.358, 21.9]
]
}
]
});

// chart.addSeries({name:'北京',data: [[1501689804077.358, 8.0],[1501689814177.358, 10.9],[1501689824277.358, 26.9],[1501689834377.358, 19.9]]});

// 参数：数值；是否重绘; isShift; 是否动画
// chart.series[0].addPoint([1501689844377.358, 29.9]);

</script>
</body>
</html>

基本折线图示例代码
注：Highcharts 在 4.2.0 开始已经不依赖 jQuery 了，直接用其构造函数既可创建图表。

hcharts在报障系统中得应用

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

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航