原文地址: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
>