最近公司项目需要，需要在web页面做一些数据统计，并以折线图的形式展现在前台。选择Highcharts，当然还有其他优秀的表格插件，百度团队开发Echarts，也是很不错的，进入正题。
（1） highcharts官网地址：http://www.highcharts.com/products/highcharts/ 或者也在http://www.hcharts.cn/product/download.php 下载。
（2） highcharts 中文地址：http://www.hcharts.cn/，这里有很详细的资料介绍，API地址：http://www.hcharts.cn/api/index.php#chart.backgroundColor
2、highcharts使用
highcharts是基于jquery开发，因此在引用highchart.js前要先引用jquery:
<script src="jquery.min.js"></script> <script src="highcharts.js"></script>
引入对应的文件中，就可以在调用一些表格插件的函数，但是需要表格显示在web上，还需要为表格定义个显示位置;
<div id="container"></div>
在js文件中只要执行以下语句，就可以在对应的位置上，出现表格。
$('#container').highcharts(options）;
3、highcharts属性配置(options)
关于highcharts的属性配置，这里我只总结，常用的一些，以折线图为例，其他的详细内容可以参考API文档（http://www.hcharts.cn/api/index.php#chart.backgroundColor）。
chart:设置表格的背景颜色、边框、内外边距、字体等
chart: {backgroundColor: "#ffffff", //背景颜色 默认值 borderColor: "#EBBA95", //边框颜色 默认值 #4572A7 borderRadius: 5, //边框圆角 默认值 borderWidth: 2, //边框宽度 默认值 0 spacing: 20, //内边距 默认值 10 10 15 10 /* 外边距 margin:"", marginLeft:"", marginBottom:"", marginRight:"", marginTop:"", */ //表格样式 style: { fontFamily: 'serif' } }
title、subTitle：对应表格的标题、副标题：
// 标题 title: { text: '任务中心-数据统计', }, // 副标题 subtitle: { text: '*** 数据统计', },
xAxis 、yAxis ：分别对x坐标轴、y坐标轴的设置。其中可以对表示区（plotBands），或者标示线（plotLines）。标示线、标识区的作用，可以在清晰的看见关心的基准值或者基准区间。下例中在y 轴上分别设置了标示线 、标识区，其中标示线的基准值是5、颜色为red；表示区基准值form 10 to 20 、颜色为FCFFC5。
// y坐标 yAxis: { title: { text: 'Temperature (度)' }, // 标示线 plotLines: [{ value: 5, width: 2, color: 'red', label: { text: '标示线', //标签的内容 align: 'left', //标签的水平位置，水平居左,默认是水平居中center x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px } }], // 标示区 plotBands: [{ from: 10, to: 20, color: '#FCFFC5', zIndex: 1 }], },
color：可以设置图表中显示的颜色，以折线图为例，colo可以设置每种折线现实的颜色，系统默认有10中颜色，当要展现的数据大于10类时，颜色会循环重复，可以自定义设置；
// 默认颜色 colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
tooptips: 展示当鼠标悬停到图中是，给出的提示信息，可以对位置、内容自定义设置，还可以设置星形线。
// 提示框信息 tooltip: { valueSuffix: '度', //前缀 valuePrefix: '温度', //后缀 shared: true, useHTML: true, headerFormat: '<small>{point.key}</small><table>', pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' + '<td style="text-align: right"><b>{point.y} </b></td></tr>', footerFormat: '</table>', // 十字星形线 crosshairs: [ { width: 2, color: '#ccc', dashStyle: 'shortdot' //短虚线 }, { width: 2, color: "#ccc", dashStyle: 'shortdot', zIndex: 100 } ], },
legend: 图例，这是表格常用的，用于说明对应的颜色或者对应的形状表示的是哪一种数据。
// 图例 legend: { layout: 'horizontal', align: 'center', borderWidth: 0, labelFormatter: function (index) { /* * 获取数据列下标，通过下标判断做一系列处理 * 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息） */ var index = this._i; // return null 则可以不显示图例项 return this.name; } },
plotOptions：图例事件，默认情况下，点击图例会影藏对应的数据。实际情况下，我们希望点击图例影藏，其他的数据，这个都可以在highchart中文网的教程上找到。但是有一个问题，如何使所有数据搜显示了。在这里，添加了一个“ALL”的图例，在传递数据时，给ALL传递一个控制。在图例事件中，通过代码控制，点击ALL的时候，显示所有数据，点击其他图例只显示对应的数据。
//图例事件 -- 点击图例影藏其他的数据 plotOptions: { series: { events: { legendItemClick: function (e) { var index = this.index; var series = this.chart.series; var length = series.length; for (var i = 0; i < length; i++) { var s = series[i]; if (index != length - 1) { //非“All”图例 i === index ? s.show() : s.hide(); } else { s.show(); //点击all图例，所有的都显示 } } return false; } } } },
credits：版权信息，默认情况下，显示在表图的右下角，可以添加超链接
// 版权信息credits: { enabled: false, // 默认值，如果想去掉版权信息，设置为false即可 text: 'www.baidu.com', // 显示的文字 href: 'http://www.baidu.com', // 链接地址 position: { // 位置设置 （默认的） align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }, style: { // 样式设置 cursor: 'pointer', fontSize: '12px' } },
series：这个当然是最重要的属性，传递要显示的数据。
series: [ { name: 'Tokyo', 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, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5 ] }, ...... { name: 'ALL' //这里对应 图例事件 } ]
4、highcharts 实例
这里给出我自己写的一个demo，附件下载：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>highchart</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="highcharts.js"></script>
<style>
#container {
width: 40%;
height: 400px;
float: right;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
$(function () {
$('#container').highcharts({
// 图表设置
chart: {
backgroundColor: "#ffffff", //背景颜色 默认值
borderColor: "#EBBA95", //边框颜色 默认值 #4572A7
borderRadius: 5, //边框圆角 默认值
borderWidth: 2, //边框宽度 默认值 0
spacing: 20, //内边距 默认值 10 10 15 10
/* 外边距
margin:"",
marginLeft:"",
marginBottom:"",
marginRight:"",
marginTop:"",
*/
//表格样式
style: {
fontFamily: 'serif'
}
},
// 标题
title: {
text: '任务中心-数据统计',
},
// 副标题
subtitle: {
text: '*** 数据统计',
},
// x坐标
xAxis: {
categories: ['1', '2', '3', '4', '5', '6',
'7', '8', '9', '10', '11', '12', '13', '14', '15', '16',
'17', '18', '19', '20', '21', '22', '23', '24', '25', '26',
'27', '28', '29', '30'
],
plotBands: [{ // mark the weekend
color: '#FCFFC5',
from: 'Mar',
to: 'May',
zIndex: 2,
label: {
text: '标示区',
verticalAlign: 'middle',
style: {
fontSize: '12px',
fontWeight: 600
}
}
}]
},
// y坐标
yAxis: {
title: {
text: 'Temperature (度)'
},
// 标示线
plotLines: [{
value: 5,
width: 2,
color: 'red',
label: {
text: '标示线', //标签的内容
align: 'left', //标签的水平位置，水平居左,默认是水平居中center
x: 10 //标签相对于被定位的位置水平偏移的像素，重新定位，水平居左10px
}
}],
// 标示区
plotBands: [{
from: 10,
to: 20,
color: '#FCFFC5',
zIndex: 1
}],
},
// 默认颜色
colors: ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
'#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'],
// 提示框信息
tooltip: {
valueSuffix: '度', //前缀
valuePrefix: '温度', //后缀
shared: true,
useHTML: true,
headerFormat: '<small>{point.key}</small><table>',
pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
'<td style="text-align: right"><b>{point.y} </b></td></tr>',
footerFormat: '</table>',
// 十字星形线
crosshairs: [
{
width: 2,
color: '#ccc',
dashStyle: 'shortdot' //短虚线
},
{
width: 2,
color: "#ccc",
dashStyle: 'shortdot',
zIndex: 100
}
],
},
// 图例
legend: {
layout: 'horizontal',
align: 'center',
borderWidth: 0,
labelFormatter: function (index) {
/*
* 获取数据列下标，通过下标判断做一系列处理
* 还可以通过获取数据列名字等来做判断（通过 console.log(this) 来查看数据列详细信息）
*/
var index = this._i;
// return null 则可以不显示图例项
return this.name;
}
},
//图例事件 -- 点击图例影藏其他的数据
plotOptions: {
series: {
events: {
legendItemClick: function (e) {
var index = this.index;
var series = this.chart.series;
var length = series.length;
for (var i = 0; i < length; i++) {
var s = series[i];
if (index != length - 1) { //非“All”图例
i === index ? s.show() : s.hide();
} else {
s.show(); //点击all图例，所有的都显示
}
}
return false;
}
}
}
},
// 版权信息
credits: {
enabled: false, // 默认值，如果想去掉版权信息，设置为false即可
text: 'www.baidu.com', // 显示的文字
href: 'http://www.baidu.com', // 链接地址
position: { // 位置设置 （默认的）
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -5
},
style: { // 样式设置
cursor: 'pointer',
fontSize: '12px'
}
},
// 数据
series: [
{
name: 'Tokyo',
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, 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,
7.0, 6.9, 9.5, 14.5, 18.2, 21.5
]
},
{
name: 'New York',
data: [0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5,
0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5,
0.2, 0.8, 5.7, 11.3, 17.0, 22.0
]
},
{
name: 'Berlin',
data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0,
0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0,
0.9, 0.6, 3.5, 8.4, 13.5, 17.0
]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, "", 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8,
3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8,
3.9, 4.2, 5.7, 8.5, 11.9, 15.2
]
},
{
name: 'ALL' //这里对应 图例事件
}
]
});
});
</script>
</body>
</html>展现效果如下：
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
