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

Question

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

Thi*_*amy 1 javascript jquery charts json highcharts

我有一些 JSON 数据，如下所示，其中包含国家/地区名称（KEY）和积压数量（VALUE）。

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>

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Gry*_*ynn 5

高图很不错。对于你的例子：

HTML：

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

Run Code Online (Sandbox Code Playgroud)

JS：

$('#container').highcharts({
    xAxis: {
        categories: ["United States", "Western Europe", "Canada", 
                     "Germany", "France", "Mexico"]
    },
    series: [{
        data: [50, 100, 150, 200, 250, 300]
    }]
});

Run Code Online (Sandbox Code Playgroud)

JSFiddle：http://jsfiddle.net/LLExL/2075/

归档时间：	12 年，1 月前
查看次数：	18274 次
最近记录：	8 年前