Question

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

JSON数据：

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

图表：

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

国家/地区名称 - ＆gt; X轴

积压计数 - ＆gt; 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值？

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

Example

Answer 2

你可以使用highcharts.com，你必须为正确的格式修改你的json。

Answer 3

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

Answer 4

您需要解析您的json以更正形式。您可以使用循环并迭代每个元素，推入新表。在数据数组中使用parseFloat（）将字符串转换为数字需要什么。

Answer 5

由于出版物的标题说HTML表格到图表，使用此库可以提供帮助：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表格代码构建图表

Answer 6

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

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

6 个答案: