原文地址：http://www.stepday.com/topic/?915
用图表呈现数据有些时候也不是那么直观，总希望能够可以切换至表格的形式呈现数据。表格体现数据还是一目了然的。所以我们可以增加一个功能，让highcharts图表和table表格之间可以相互切换呈现数据。这里我提供了一个比较单一的切换功能，后期可以自行变换方式，比如：通过工具箱内按钮进行切换也或者右键菜单内进行切换
一、highcharts图表转换为table表格
highcharts图表想要转换为table，我们需要获取其核心数据即可：
1、categories数据：也就是获取刻度，也就是table的表头数据；
2、series：每一组序列以及其在每一个刻度上所体现的数据值；
3、title：图表标题，能够让table数据体现更加明了；
4、subtitle：副标题；
拿到这些数据过后，我们需要借助于jQuery操作table的一些方法进行数据的附加。转换函数如下所示：
01.
///将Highcharts图表数据切换为Table表格呈现
02.
function HighchartsToTable(obj) {
03.
obj.onclick = function () {
04.
TableToHighcharts(obj);
05.
};
06.
obj.value = "切换至图表呈现";
07.
08.
//拿到图表对象
09.
var chart = $("#container").highcharts();
10.
if (chart != null) {
11.
//拿到X轴集合对象
12.
var categories = chart.xAxis[0].categories;
13.
//拿到series集合
14.
var seriesList = chart.series;
15.
var title = chart.title.textStr;
16.
var subtitle = chart.subtitle.textStr;
17.
18.
//插入表头
19.
$("#container").html("");
20.
var tableObj = $("#container");
21.
var tr;
22.
//插入表格标题
23.
if (title.length > 0) {
24.
tr = $("<tr></tr>");
25.
tr.appendTo(tableObj);
26.
var td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center; font-weight:bold;'>"+ title + "</td>");
27.
td.appendTo(tr);
28.
}
29.
//插入副标题
30.
if (subtitle.length > 0) {
31.
tr = $("<tr></tr>");
32.
tr.appendTo(tableObj);
33.
td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center;'>" + subtitle + "</td>");
34.
td.appendTo(tr);
35.
}
36.
tr = $("<tr></tr>")
37.
tr.appendTo(tableObj);
38.
td = $("<td>站点\\日期</td>");
39.
td.appendTo(tr);
40.
for (var i = 0; i < categories.length; i++) {
41.
td = $("<td>" + categories[i] + "</td>");
42.
td.appendTo(tr);
43.
}
44.
//分批插入数据
45.
for (var i = 0; i < seriesList.length; i++) {
46.
tr = $("<tr></tr>");
47.
tr.appendTo(tableObj);
48.
//先加入一个序列名称
49.
td = $("<td>" + seriesList[i].name + "</td>");
50.
td.appendTo(tr);
51.
//遍历数据点追加数据值
52.
for (var j = 0; j < seriesList[i].data.length; j++) {
53.
td = $("<td>" + seriesList[i].data[j].y + "</td>");
54.
td.appendTo(tr);
55.
}
56.
}
57.
} else {
58.
alert("获取图表对象失败!");
59.
}
60.
}
为了让table表格覆盖掉之前的图表对象，所以我们方法内执行了一段代码：
1.
$("#container").html("");
清空图表内容，然后在附加一个table对象进去。
效果图如下所示：
==》
二、Table表格切换至Highcharts图表
这个切换并未去提取table表格的数据然后然组装数据赋值给highcharts独享的，这里而是在图表呈现初期就设置了一个全局变量，将图表的options对象抽取出来。
01.
//图表配置项
02.
var options = {
03.
chart: {
04.
type: "line"
05.
},
06.
title: {
07.
text: '各大站点每月独立IP量关系图呈现'
08.
},
09.
subtitle: {
10.
text: 'From:www.stepday.com'
11.
},
12.
xAxis: {
13.
categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']
14.
},
15.
yAxis: {
16.
title: {
17.
text: '独立IP'
18.
},
19.
plotLines: [{
20.
value: 0,
21.
width: 1,
22.
color: '#808080'
23.
}]
24.
},
25.
credits: {
26.
text: "www.stepday.com",
27.
href: "http://www.stepday.com",
28.
style: {
29.
color: "red"
30.
}
31.
},
32.
series: [{
33.
name: 'stepday',
34.
data: [30020, 25186, 45356, 63452, 34554, 49327]
35.
}, {
36.
name: 'tuiwosa',
37.
data: [40020, 35186, 55356, 53452, 54554, 69327]
38.
}]
39.
};
然后在table切换至highcharts图表的时候去重新更具options配置创建一下图表即可：
1.
///创建图表 根据options设置
2.
function CreateHighcharts() {
3.
$('#container').highcharts(options);
4.
}
Table转换为highcharts的方法如下所示：
01.
//提取table数据生成Highcharts图表
02.
function TableToHighcharts(obj) {
03.
obj.onclick = function () {
04.
HighchartsToTable(obj);
05.
};
06.
obj.value = "切换至表格呈现";
07.
08.
//拿到图表对象
09.
var tableObj = $("#container");
10.
if (tableObj == null) {
11.
alert("图表对象为空!");
12.
return;
13.
}
14.
tableObj.html("");
15.
CreateHighcharts();
16.
}
效果图如下所示：
==》
完整示例代码如下所示：
001.
<!DOCTYPE HTML>
002.
<html>
003.
<head>
004.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
005.
<title>highcharts图表与table相互之间的转换关系</title>
006.
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
007.
<script type="text/javascript" src="js/highcharts.js"></script>
008.
<style type="text/css">
009.
#container tr
010.
{
011.
line-height:35px;
012.
}
013.
#container td
014.
{
015.
border: 1px solid green;
016.
}
017.
</style>
018.
<script type="text/javascript">
019.
020.
//图表配置项
021.
var options = {
022.
chart: {
023.
type: "line"
024.
},
025.
title: {
026.
text: '各大站点每月独立IP量关系图呈现'
027.
},
028.
subtitle: {
029.
text: 'From:www.stepday.com'
030.
},
031.
xAxis: {
032.
categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']
033.
},
034.
yAxis: {
035.
title: {
036.
text: '独立IP'
037.
},
038.
plotLines: [{
039.
value: 0,
040.
width: 1,
041.
color: '#808080'
042.
}]
043.
},
044.
credits: {
045.
text: "www.stepday.com",
046.
href: "http://www.stepday.com",
047.
style: {
048.
color: "red"
049.
}
050.
},
051.
series: [{
052.
name: 'stepday',
053.
data: [30020, 25186, 45356, 63452, 34554, 49327]
054.
}, {
055.
name: 'tuiwosa',
056.
data: [40020, 35186, 55356, 53452, 54554, 69327]
057.
}]
058.
};
059.
060.
///创建图表 根据options设置
061.
function CreateHighcharts() {
062.
$('#container').highcharts(options);
063.
}
064.
065.
$(function () {
066.
CreateHighcharts();
067.
});
068.
069.
///将Highcharts图表数据切换为Table表格呈现
070.
function HighchartsToTable(obj) {
071.
obj.onclick = function () {
072.
TableToHighcharts(obj);
073.
};
074.
obj.value = "切换至图表呈现";
075.
076.
//拿到图表对象
077.
var chart = $("#container").highcharts();
078.
if (chart != null) {
079.
//拿到X轴集合对象
080.
var categories = chart.xAxis[0].categories;
081.
//拿到series集合
082.
var seriesList = chart.series;
083.
var title = chart.title.textStr;
084.
var subtitle = chart.subtitle.textStr;
085.
086.
//插入表头
087.
$("#container").html("");
088.
var tableObj = $("#container");
089.
var tr;
090.
//插入表格标题
091.
if (title.length > 0) {
092.
tr = $("<tr></tr>");
093.
tr.appendTo(tableObj);
094.
var td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center; font-weight:bold;'>" + title + "</td>");
095.
td.appendTo(tr);
096.
}
097.
//插入副标题
098.
if (subtitle.length > 0) {
099.
tr = $("<tr></tr>");
100.
tr.appendTo(tableObj);
101.
td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center;'>" + subtitle + "</td>");
102.
td.appendTo(tr);
103.
}
104.
tr = $("<tr></tr>")
105.
tr.appendTo(tableObj);
106.
td = $("<td>站点\\日期</td>");
107.
td.appendTo(tr);
108.
for (var i = 0; i < categories.length; i++) {
109.
td = $("<td>" + categories[i] + "</td>");
110.
td.appendTo(tr);
111.
}
112.
//分批插入数据
113.
for (var i = 0; i < seriesList.length; i++) {
114.
tr = $("<tr></tr>");
115.
tr.appendTo(tableObj);
116.
//先加入一个序列名称
117.
td = $("<td>" + seriesList[i].name + "</td>");
118.
td.appendTo(tr);
119.
//遍历数据点追加数据值
120.
for (var j = 0; j < seriesList[i].data.length; j++) {
121.
td = $("<td>" + seriesList[i].data[j].y + "</td>");
122.
td.appendTo(tr);
123.
}
124.
}
125.
} else {
126.
alert("获取图表对象失败!");
127.
}
128.
}
129.
130.
//提取table数据生成Highcharts图表
131.
function TableToHighcharts(obj) {
132.
obj.onclick = function () {
133.
HighchartsToTable(obj);
134.
};
135.
obj.value = "切换至表格呈现";
136.
137.
//拿到图表对象
138.
var tableObj = $("#container");
139.
if (tableObj == null) {
140.
alert("图表对象为空!");
141.
return;
142.
}
143.
tableObj.html("");
144.
CreateHighcharts();
145.
}
146.
</script>
147.
</head>
148.
<body>
149.
<div id="container" style="width: 400px; margin: 0 auto">
150.
</div>
151.
<div style="text-align: center; width: 100%;">
152.
<input type="button" value="切换到表格呈现" onclick="HighchartsToTable(this)" />
153.
</div>
154.
</body>
155.
</html>
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
