如何将 HTML 表格转换为图表？答案

【问题标题】：How to convert HTML table to Chart?如何将 HTML 表格转换为图表？
【发布时间】：2013-12-07 13:53:00
【问题描述】：

我有一些带有国家名称（KEY）和积压计数（VALUE）的 JSON 数据。

JSON 数据：

{"美国":"50","西欧":"100","加拿大":"150","德国":"200","法国":"250","墨西哥": “300”}

图表：

现在我想在图表中绘制这些值，例如，

国家名称 --> X 轴

积压计数 --> Y 轴

我怎样才能做到这一点？

代码：

 <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>

我想从 JSON 文件中动态传递 Xaxis 和 Yaxis 值？

【问题讨论】：

data.json中数据的格式是什么？
{"美国":"50","西欧":"100","加拿大":"150","德国":"200","法国":"250" ,"Mexico":"300"} 这是data.json文件的内容..
jsfiddle.net/xPSXQ/1 ：动态加载数据的示例
嘿 Grynn，这就像一个魅力！非常感谢您的快速帮助！

标签： javascript json jquery charts highcharts

【解决方案1】：

Highcharts 很好。以您为例：

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 300px; height: 300px; margin: 1em"></div>

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/

【讨论】：

嗨 Grynn，感谢您的快速响应，我只想从 JSON 文件动态传递 X 轴和 Y 轴值。可以使用 HighCharts 吗？

【解决方案2】：

由于出版物的标题是 HTML table to chart，使用这个库可以提供帮助：HTMLtable2chart

如果你有这样的 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>

你在head标签之间添加：

<script type="text/javascript" src="js/HTMLtable2chart/graficarBarras.js"></script>
<script type="text/javascript" src="js/HTMLtable2chart/tabla2array.js"></script>

您添加一个canvas 对象

<canvas id="chart" width="750" height="480" style="border: 1px solid black;">Canvas is not supported</canvas>

最后在文档末尾添加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>

你将拥有：

因此，您可以从 HTML 表格代码构建图表

【讨论】：

【解决方案3】：

您可以使用 highcharts.com，您必须稍微修改一下您的 json 以获得正确的格式。

【讨论】：

【解决方案4】：

我使用 kendo ui data viz，它非常适合我。

【讨论】：

【解决方案5】：

您需要将 json 解析为正确的格式。您可以在每个元素上使用循环和迭代，推入新表。重要的是您需要使用 parseFloat() 将字符串转换为数据数组中的数字。

【讨论】：

【解决方案6】：

如果您有 json 数据，您可以尝试使用任何 java 脚本图表库来绘制图表。
-ExtJS4 有一组很棒的图表。
-D3.js支持通过json加载数据。
-highCharts 也很棒。
-dygraphs

【讨论】：