highchart图标和table切换

zengshaotao

浏览: 787670 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

开发小记
highchart

原文地址：http://www.stepday.com/topic/?915

用图表呈现数据有些时候也不是那么直观，总希望能够可以切换至表格的形式呈现数据。表格体现数据还是一目了然的。所以我们可以增加一个功能，让highcharts图表和table表格之间可以相互切换呈现数据。这里我提供了一个比较单一的切换功能，后期可以自行变换方式，比如：通过工具箱内按钮进行切换也或者右键菜单内进行切换

一、highcharts图表转换为table表格

highcharts图表想要转换为table，我们需要获取其核心数据即可：

1、categories数据：也就是获取刻度，也就是table的表头数据；

2、series：每一组序列以及其在每一个刻度上所体现的数据值；

3、title：图表标题，能够让table数据体现更加明了；

4、subtitle：副标题；

拿到这些数据过后，我们需要借助于jQuery操作table的一些方法进行数据的附加。转换函数如下所示：

///将Highcharts图表数据切换为Table表格呈现

function HighchartsToTable(obj) {           

obj.onclick = function () {

TableToHighcharts(obj);

};

obj.value = "切换至图表呈现";

 

//拿到图表对象

var chart = $("#container").highcharts();

if (chart != null) {               

//拿到X轴集合对象

var categories = chart.xAxis[0].categories;

//拿到series集合

var seriesList = chart.series;

var title = chart.title.textStr;

var subtitle = chart.subtitle.textStr;

 

//插入表头

$("#container").html("");

var tableObj = $("#container");              

var tr;

//插入表格标题

if (title.length > 0) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

var td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center; font-weight:bold;'>"+ title + "</td>");

td.appendTo(tr);                   

}

//插入副标题

if (subtitle.length > 0) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center;'>" + subtitle + "</td>");

td.appendTo(tr);                   

}

tr = $("<tr></tr>")

tr.appendTo(tableObj);

td = $("<td>站点\\日期</td>");

td.appendTo(tr);

for (var i = 0; i < categories.length; i++) {

td = $("<td>" + categories[i] + "</td>");

td.appendTo(tr);

}

//分批插入数据

for (var i = 0; i < seriesList.length; i++) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

//先加入一个序列名称

td = $("<td>" + seriesList[i].name + "</td>");

td.appendTo(tr);

//遍历数据点追加数据值

for (var j = 0; j < seriesList[i].data.length; j++) {

td = $("<td>" + seriesList[i].data[j].y + "</td>");

td.appendTo(tr);

}

}

} else {

alert("获取图表对象失败!");

}

}

为了让table表格覆盖掉之前的图表对象，所以我们方法内执行了一段代码：

1.$("#container").html("");

清空图表内容，然后在附加一个table对象进去。

效果图如下所示：

highcharts图表呈现数据 ==》 table表格呈现数据

二、Table表格切换至Highcharts图表

这个切换并未去提取table表格的数据然后然组装数据赋值给highcharts独享的，这里而是在图表呈现初期就设置了一个全局变量，将图表的options对象抽取出来。

//图表配置项

var options = {

chart: {

type: "line"

},

title: {

text: '各大站点每月独立IP量关系图呈现'

},

subtitle: {

text: 'From:www.stepday.com'

},

xAxis: {

categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']

},

yAxis: {

title: {

text: '独立IP'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

credits: {

text: "www.stepday.com",

href: "http://www.stepday.com",

style: {

color: "red"

}

},

series: [{

name: 'stepday',

data: [30020, 25186, 45356, 63452, 34554, 49327]

}, {

name: 'tuiwosa',

data: [40020, 35186, 55356, 53452, 54554, 69327]

}]

};

然后在table切换至highcharts图表的时候去重新更具options配置创建一下图表即可：

///创建图表 根据options设置

function CreateHighcharts() {

$('#container').highcharts(options);

}

Table转换为highcharts的方法如下所示：

//提取table数据生成Highcharts图表

function TableToHighcharts(obj) {           

obj.onclick = function () {

HighchartsToTable(obj);

};

obj.value = "切换至表格呈现";

 

//拿到图表对象

var tableObj = $("#container");

if (tableObj == null) {

alert("图表对象为空!");

return;

}

tableObj.html("");

CreateHighcharts();

}

效果图如下所示：

table表格呈现数据 ==》 highcharts图表呈现数据

完整示例代码如下所示：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>highcharts图表与table相互之间的转换关系</title>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<style type="text/css">

#container tr

{

line-height:35px;

}

#container td

{

border: 1px solid green;

}

</style>

<script type="text/javascript">

 

//图表配置项

var options = {

chart: {

type: "line"

},

title: {

text: '各大站点每月独立IP量关系图呈现'

},

subtitle: {

text: 'From:www.stepday.com'

},

xAxis: {

categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份']

},

yAxis: {

title: {

text: '独立IP'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

credits: {

text: "www.stepday.com",

href: "http://www.stepday.com",

style: {

color: "red"

}

},

series: [{

name: 'stepday',

data: [30020, 25186, 45356, 63452, 34554, 49327]

}, {

name: 'tuiwosa',

data: [40020, 35186, 55356, 53452, 54554, 69327]

}]

};

 

///创建图表 根据options设置

function CreateHighcharts() {

$('#container').highcharts(options);

}

 

$(function () {

CreateHighcharts();

});

 

///将Highcharts图表数据切换为Table表格呈现

function HighchartsToTable(obj) {           

obj.onclick = function () {

TableToHighcharts(obj);

};

obj.value = "切换至图表呈现";

 

//拿到图表对象

var chart = $("#container").highcharts();

if (chart != null) {               

//拿到X轴集合对象

var categories = chart.xAxis[0].categories;

//拿到series集合

var seriesList = chart.series;

var title = chart.title.textStr;

var subtitle = chart.subtitle.textStr;

 

//插入表头

$("#container").html("");

var tableObj = $("#container");              

var tr;

//插入表格标题

if (title.length > 0) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

var td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center; font-weight:bold;'>" + title + "</td>");

td.appendTo(tr);                   

}

//插入副标题

if (subtitle.length > 0) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

td = $("<td colspan='" + categories.length + 1 + "' style='text-align:center;'>" + subtitle + "</td>");

td.appendTo(tr);                   

}

tr = $("<tr></tr>")

tr.appendTo(tableObj);

td = $("<td>站点\\日期</td>");

td.appendTo(tr);

for (var i = 0; i < categories.length; i++) {

td = $("<td>" + categories[i] + "</td>");

td.appendTo(tr);

}

//分批插入数据

for (var i = 0; i < seriesList.length; i++) {

tr = $("<tr></tr>");

tr.appendTo(tableObj);

//先加入一个序列名称

td = $("<td>" + seriesList[i].name + "</td>");

td.appendTo(tr);

//遍历数据点追加数据值

for (var j = 0; j < seriesList[i].data.length; j++) {

td = $("<td>" + seriesList[i].data[j].y + "</td>");

td.appendTo(tr);

}

}

} else {

alert("获取图表对象失败!");

}

}

 

//提取table数据生成Highcharts图表

function TableToHighcharts(obj) {           

obj.onclick = function () {

HighchartsToTable(obj);

};

obj.value = "切换至表格呈现";

 

//拿到图表对象

var tableObj = $("#container");

if (tableObj == null) {

alert("图表对象为空!");

return;

}

tableObj.html("");

CreateHighcharts();

}

</script>

</head>

<body>

<div id="container" style="width: 400px; margin: 0 auto">

</div>

<div style="text-align: center; width: 100%;">

<input type="button" value="切换到表格呈现" onclick="HighchartsToTable(this)" />

</div>

</body>

</html>

分享到：

列更新列 | JavaScript的函数定义覆盖而不是重载

2015-04-17 10:10
浏览 1220
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论