Highchart动态获取X,Y数据，根据生成的table生成对应的图表

偶尔跟同事做了一个小东西用到统计这块儿，自然而然的想到了highchart,这东西绝壁好用我会乱说吗

 

<script type="text/javascript">

var keysArr = new Array("y", "color");

function TableToJson(tableid) { //tableid是你要转化的表的表名，是一个字符串，如"example"
var colors = Highcharts.getOptions().colors;

var rows = document.getElementById(tableid).rows.length; //获得行数(包括thead)

var colums = document.getElementById(tableid).rows[0].cells.length; //获得列数

var json = "[";

var tdValue, tdValue1, tdName1;

for (var i = 1; i < rows; i++) { //每行

tdName = keysArr[1]; //color:
tdName1 = keysArr[0]; //y:
tdValue = document.getElementById(tableid).rows[i].cells[0].innerHTML; //第一列
tdValue1 = document.getElementById(tableid).rows[i].cells[2].innerHTML; //第三列
json += "{";
json += tdName;
json += ":";

if (parseFloat(tdValue1) > 10) {
json += "\"";
json += "red";
//"#993300";
json += "\"";
}
else {
json += "colors[3]";
}
json += ",";
json += tdName1;
json += ":";
json += tdValue1;
json += "}";
json += ",";
}

json = json.substring(0, json.length - 1);

json += "]";

return json;

}
function getcatagory(tableid) {
var adata = new Array();
var tdValue;
var rows = document.getElementById(tableid).rows.length; //获得行数(包括thead)
var colums = document.getElementById(tableid).rows[0].cells.length; //获得列数
for (var i = 1; i < rows; i++) {
adata[i - 1] = document.getElementById(tableid).rows[i].cells[0].innerHTML;
}
return adata
}
</script>
<script type="text/javascript">
$(function () {
var colors = Highcharts.getOptions().colors;
var categories = getcatagory('datatable');
var name = '条例编码';
//var title=@ViewBag.title;
data = eval('(' + TableToJson('datatable') + ')');

function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'whilte'
}, false);
chart.redraw();
}

var chart = $('#container').highcharts({
chart: {
type: 'column',
style: {
fontFamily: "",
fontSize: '12px',
fontWeight: 'bold',
color: '#fff'
//'#006cee'
}
},
credits: { enabled: false },
title: {
text: ''
},
legend: {},
xAxis: {
categories: categories,
title: {
text: '条例编码'
}
},
yAxis: {
title: {
text: '出现次数'
}
},
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
setChart(name, categories, data);
}
}
},
dataLabels: {
enabled: true,
color: colors[1],
style: {
fontWeight: 'bold'
},
formatter: function () {
return this.y;
}
}
}
},
tooltip: {
formatter: function () {
var point = this.point,
s = this.x + ':' + this.y + '<br/>';
return s;
}
},
series: [
{
name: "超过十次",
data: data,
color: 'red'
}],
exporting: {
enabled: false
}
})
.highcharts(); // return chart
});

</script>