javascript Highcharts JSON data to HTML table
javascript Highcharts JSON data to HTML table
我有如下json数据:
[{"Name":["CV","CT","ABM","AB","B","HD","P"],"Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4],"Baseline":143.41}]
我想把它变成一个类似于下面的HTML表格
Name Data
CV 944.79
CT 540.93
ABM 466.29
AB 360.91
B 109.93
HD 64.9
P 25.4
这样的事情可能吗?此数据采用该格式,因为这是Highcharts条形图读取它的方式。
当然可以。
var data = [
{
"Name":["CV","CT","ABM","AB","B","HD","P"],
"Data":[944.79,540.93,466.29,360.91,109.93,64.9,25.4],
"Baseline":143.41
}
];
data = data[0];
$(function() {
var table = $('<table class="info">');
var tableHeader = $('<thead><tr><th>Name</th><th>Data</th></tr></thead>');
var tableBody = $('<tbody>');
var name, value, row;
table.append(tableHeader);
table.append(tableBody);
for (var i = 0, len = data.Name.length; i < len; i++) {
name = data.Name[i];
value = data.Data[i];
row = $('<tr><td>' + name + '</td><td>' + value + '</td></tr>');
tableBody.append(row);
}
$('body').append(table);
});
table.info {
border: 1px solid gray;
}
table.info thead {
background: silver;
}
table.info tbody tr:nth-child(even) {
background: rgba(0, 0, 0, 0.3);
}
table.info td {
text-align: center;
padding: 5px;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
不确定这里的高图表到底在哪里。此外,您也不需要jQuery来从此对象创建表。此Object
有三个键Name,Data,Baseline
如果你想构建一个表,你只需要遍历它并获取它的值
.HTML
<table border="1">
<thead><tr><td>Name</td><td>Data</td></tr></thead>
<tbody id="tabBody"></tbody>
</table>
.JS
var a=[{"Name":["CV","CT","ABM","AB","B","HD","P"],
"Data": [944.79,540.93,466.29,360.91,109.93,64.9,25.4],
"Baseline":143.41}]
var data = a[0]["Data"]; // get data array
var name =a[0]["Name"];// get name Array
var cachDom ="";
for(var x=0;x<data.length;x++){
cachDom+="<tr><td>"+name[x]+"</td><td>"+data[x]+"</td></tr>";
}
document.getElementById("tabBody").innerHTML=cachDom;
工作示例
您还可以使用 Highcharts API 创建表,如以下示例所示:
Highcharts.drawTable = function() {
// user options
var tableTop = 310,
colWidth = 100,
tableLeft = 20,
rowHeight = 20,
cellPadding = 2.5,
valueDecimals = 1,
valueSuffix = ' °C';
// internal variables
var chart = this,
series = chart.series,
renderer = chart.renderer,
cellLeft = tableLeft;
// draw category labels
$.each(chart.xAxis[0].categories, function(i, name) {
renderer.text(
name,
cellLeft + cellPadding,
tableTop + (i + 2) * rowHeight - cellPadding
)
.css({
fontWeight: 'bold'
})
.add();
});
$.each(series, function(i, serie) {
cellLeft += colWidth;
// Apply the cell text
renderer.text(
serie.name,
cellLeft - cellPadding + colWidth,
tableTop + rowHeight - cellPadding
)
.attr({
align: 'right'
})
.css({
fontWeight: 'bold'
})
.add();
$.each(serie.data, function(row, point) {
// Apply the cell text
renderer.text(
Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix,
cellLeft + colWidth - cellPadding,
tableTop + (row + 2) * rowHeight - cellPadding
)
.attr({
align: 'right'
})
.add();
// horizontal lines
if (row == 0) {
Highcharts.tableLine( // top
renderer,
tableLeft,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + cellPadding
);
Highcharts.tableLine( // bottom
renderer,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
// horizontal line
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + row * rowHeight + rowHeight + cellPadding,
cellLeft + colWidth,
tableTop + row * rowHeight + rowHeight + cellPadding
);
});
// vertical lines
if (i == 0) { // left table border
Highcharts.tableLine(
renderer,
tableLeft,
tableTop + cellPadding,
tableLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
Highcharts.tableLine(
renderer,
cellLeft,
tableTop + cellPadding,
cellLeft,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
if (i == series.length - 1) { // right table border
Highcharts.tableLine(
renderer,
cellLeft + colWidth,
tableTop + cellPadding,
cellLeft + colWidth,
tableTop + (serie.data.length + 1) * rowHeight + cellPadding
);
}
});
};
/**
* Draw a single line in the table
*/
Highcharts.tableLine = function (renderer, x1, y1, x2, y2) {
renderer.path(['M', x1, y1, 'L', x2, y2])
.attr({
'stroke': 'silver',
'stroke-width': 1
})
.add();
}
图表:
chart: {
renderTo: 'container',
events: {
load: Highcharts.drawTable
},
borderWidth: 2
},
例:
- http://jsfiddle.net/highcharts/z9zXM/
文档:
- http://www.highcharts.com/docs/getting-started/frequently-asked-questions#add-data-table
相关文章:
- CSV to html table
- Traversing through a html table
- JSon HTML Table
- 使用 java 脚本导出 html table excel.找到“#”时不导出
- PHP and html table, using tablesorter javascript
- javascript Highcharts JSON data to HTML table
- Ruby on Rails/HTML table
- Empty HTML Table
- ArrayList to update HTML Table
- Append html table
- acts_as_votable javascript html table
- ng-repeat issue and html table
- HTML Table to Excel Javascript
- Jquery lazyload plugin and html table issue
- Knockout with HTML table issue
- jQuery cleaning HTML table
- JavaScript HTML table parsing
- refreshing html table
- 导出JavaScript Array of Filtered HTML Table数据到MS Excel或CSV
- Jquery parse HTML Table