javascript 如何将 HTML 表格转换为图表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20442147/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert HTML table to Chart?
提问by Thirunavukkarasu Muthuswamy
I have some JSON data as follows with country name(KEY) and backlog count(VALUE).
我有一些 JSON 数据，包括国家名称（KEY）和积压计数（VALUE）。
JSON Data:
JSON 数据：
{"United States":"50","Western Europe":"100","Canada":"150","Germany":"200","France":"250","Mexico":"300"}
{"美国":"50","西欧":"100","加拿大":"150","德国":"200","法国":"250","墨西哥":"300" }
Chart:
图表：
Now i want to plot this values in chart like,
现在我想在图表中绘制这个值，例如，
Country Name --> X Axis
国家名称 --> X 轴
Backlog Count --> Y Axis
积压计数 --> Y 轴
How can i achieve this ?
我怎样才能做到这一点？
Code:
代码：
<html>
<head>
<title>RESTful Webservice JQuery client </title>
</head>
<body>
<table id="results" border="1"></table>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
//When DOM loaded we attach click event to button
$(document).ready(function() {
//after button is clicked we download the data
//$('.button').click(function(){
//start ajax request
$.ajax({
url: "data.json",
//force to handle it as json
dataType: "json",
success: function(data) {
//Stringify the Json
var strigifyJson=JSON.stringify(data);
//data downloaded so we call parseJSON function
//and pass downloaded data
var json = $.parseJSON(strigifyJson);
//print it to the firebug console for troubleshooting
console.log(json);
//parse description and value using each function
var tr;
var country,backlog;
jQuery.each(json, function(i, val) {
tr += "<tr><td>"+i+"</td><td>" +val+"</td></tr>";
console.log(i+" "+val);
});
console.log(country+" "+backlog);
//now json variable contains data in json format
//let's display a few items in webpage using html function
$('#results').html(tr);
$('#container').highcharts({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
title:{
text: 'Country'
},
categories: ["United States", "Western Europe", "Canada",
"Germany", "France", "Mexico"]
},
yAxis: {
title:{
text: 'Backlog Count'
}
},
series: [{
data: [50, 100, 150, 200, 250, 300]
}],
title: {
text: 'Backlog Trend'
}
});
}
});
//});
});
</script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
</body>
</html>
Here i want to pass the Xaxis and Yaxis value dynamically from a JSON file?
在这里，我想从 JSON 文件动态传递 Xaxis 和 Yaxis 值？
采纳答案by Sven
if you have a json data you can try any java script charting library to draw chart.
-ExtJS4has a great set of charts.
-D3.jssupports loading data through json.
-highChartsis also great.
-dygraphs
如果您有 json 数据，您可以尝试使用任何 java 脚本图表库来绘制图表。
- ExtJS4有一组很棒的图表。
- D3.js支持通过 json 加载数据。
- highCharts也很棒。
- dygraphs
回答by Grynn
Highchartsis nice. For your example:
Highcharts不错。对于您的示例：
HTML:
HTML：
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>
JS:
JS：
$('#container').highcharts({
xAxis: {
categories: ["United States", "Western Europe", "Canada",
"Germany", "France", "Mexico"]
},
series: [{
data: [50, 100, 150, 200, 250, 300]
}]
});
JSFiddle: http://jsfiddle.net/LLExL/2075/
JSFiddle：http: //jsfiddle.net/LLExL/2075/
回答by Rodney Salcedo
Since the title of the publication says HTML table to chart, using this library can help: HTMLtable2chart
由于出版物的标题说 HTML table to chart，使用这个库可以帮助：HTMLtable2chart
If you have a HTML table like this:
如果您有这样的 HTML 表格：
<table id="tableConten">
<thead>
<tr>
<th></th>
<th>Backlog Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>50</td>
</tr>
<tr>
<td>Western Europe</td>
<td>100</td>
</tr>
<tr>
<td>Canada</td>
<td>150</td>
</tr>
<tr>
<td>Germany</td>
<td>200</td>
</tr>
<tr>
<td>France</td>
<td>250</td>
</tr>
<tr>
<td>Mexico</td>
<td>300</td>
</tr>
</tbody>
</table>
You add between headtags:
您在head标签之间添加：
<script type="text/javascript" src="js/HTMLtable2chart/graficarBarras.js"></script>
<script type="text/javascript" src="js/HTMLtable2chart/tabla2array.js"></script>
You add a canvasobject
你添加一个canvas对象
<canvas id="chart" width="750" height="480" style="border: 1px solid black;">Canvas is not supported</canvas>
Finally add javascript code at end of document
最后在文档末尾添加javascript代码
<script type="text/javascript">
var misParam ={
miMargen : 0.80,
separZonas : 0.05,
tituloGraf : "Title of Chart",
tituloEjeX : "Country",
tituloEjeY : "Backlog Count",
nLineasDiv : 10,
mysColores :[
["rgba(93,18,18,1)","rgba(196,19,24,1)"], //red
["rgba(171,115,51,1)","rgba(251,163,1,1)"], //yellow
],
anchoLinea : 2,
};
obtener_datos_tabla_convertir_en_array('tableConten',graficarBarras,'chart','750','480',misParam,true);
</script>
And you will have:
你将拥有：
So, you can build a chart from HTML table code
因此，您可以从 HTML 表格代码构建图表
回答by MZH
You can use highcharts.com, u will have to modify your json a bit for the right format.
您可以使用 highcharts.com，您必须稍微修改您的 json 以获得正确的格式。
回答by Noampz
I use kendo ui data viz and it works perfect for me.
我使用 kendo ui data viz，它非常适合我。
回答by Sebastian Bochan
You need to parse your json to correct form. You can use loop and iterate on each element, pushing in new table. What is important you need to use parseFloat() to transform strings to numbers, in data array.
您需要将 json 解析为正确的形式。您可以使用循环并迭代每个元素，推入新表。重要的是您需要使用 parseFloat() 将字符串转换为数据数组中的数字。
