如何正确显示我的高图表并导入数据？

在我的highchart上，我如何设置Y轴（dataItem），以便相应地填充一个国家在我的json数据中出现的次数。所以在我的片段中，它应该显示GB为66％，而不是两个33％？如何正确显示我的高图表并导入数据？

另外如果我要保存在一个单独的文件中，那么导入我的json数据的好方法是什么。正在考虑将它保存在一个名为（json_data.json）的单独文件中。

请帮忙。

$(document).ready(function() { 
 

 
var json= 
 
[ 
 
    { 
 
     "Hot": false, 
 
     "Country": "NETHERLANDS", 
 
     "DomCountry": "NA", 
 
     "DomPortCode": "*PI", 
 
     "Code": "RTM", 
 
     "Origin": "NL", 
 
     "CodeDest": "NA", 
 
    }, 
 
    { 
 
     "Hot": true, 
 
     "Country": "GREAT BRITAIN", 
 
     "DomCountry": "POLAND", 
 
     "DomPortCode": "*PI", 
 
     "Code": "CAL", 
 
     "Origin": "GB", 
 
     "CodeDest": "PL", 
 
    }, 
 
    { 
 
     "Hot": true, 
 
     "Country": "GREAT BRITAIN", 
 
     "DomCountry": "POLAND", 
 
     "DomPortCode": "*PI", 
 
     "Code": "CAL", 
 
     "Origin": "GB", 
 
     "CodeDest": "PL", 
 
    } 
 
]; 
 

 

 

 
\t \t \t var listData=json; 
 
      console.log(listData); 
 
\t \t \t var dataList = [] 
 
\t \t \t var dataItem; 
 
\t \t \t for (var i = 0; i < listData.length; i++) { 
 
\t \t \t dataItem={ 
 
\t \t \t \t name: listData[i].Country, 
 
\t \t \t \t y: 1 
 
\t \t \t } 
 
\t \t \t dataList.push(dataItem); //dataItem push 
 
\t \t \t } 
 
     // Build the chart 
 
     $('#container').highcharts({ 
 
      chart: { 
 
       plotBackgroundColor: null, 
 
       plotBorderWidth: null, 
 
       plotShadow: false, 
 
       type: 'pie' 
 
      }, 
 
      title: { 
 
       text: 'SHIPPING INFO' 
 
      }, 
 
      tooltip: { 
 
       pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
 
      }, 
 
      plotOptions: { 
 
       pie: { 
 
        allowPointSelect: true, 
 
        cursor: 'pointer', 
 
        dataLabels: { 
 
         enabled: false 
 
        }, 
 
        showInLegend: true 
 
       } 
 
      }, 
 
      series: [{ 
 
       name: "Try", 
 
       colorByPoint: true, 
 
       data: dataList 
 
      }] 
 
     }); 
 
\t \t \t 
 
\t \t \t 
 
    });

\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t \t <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> 
 
\t \t <script src="https://code.highcharts.com/highcharts.js"></script> 
 
\t \t <script src="https://code.highcharts.com/modules/exporting.js"></script> 
 
\t \t <title>Highcharts Examples</title> 
 
\t </head> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

来源

2015-11-03 ellie stone

你需要通过你的数据环路和计数的出现。

然后您需要计算百分比，并以Highcharts可以使用的方式格式化数据。

可以遍历它，建立自己的第一套了这样的事情：

var countryCounts = {}; 
var countryNames = []; 
var totalCount = 0; 

//loop through the object 
$.each(json, function(i, node) { 

    //get the country name 
    var countryName = node["Country"]; 
    //build array of unique country names 

    if($.inArray(countryName, countryNames) == -1) { 
     countryNames.push(countryName); 
    } 

    //add or increment a count for the country name 
    if(typeof countryCounts[countryName] == 'undefined') { 
     countryCounts[countryName] = 1; 
    } 
    else { 
     countryCounts[countryName]++; 
    } 
    //increment the total count so we can calculate % 
    totalCount++; 
});

这就给了你，你需要从算得了什么。

然后你就可以遍历您的国家名称，并建立一个数据数组：

var data = []; 

//loop through unique countries to build data for chart 
$.each(countryNames, function(i, countryName) { 
    data.push({ 
     name: countryName, 
     y: Math.round((countryCounts[countryName]/totalCount) * 100) 
    }); 
});

这使得它的动态，这样就可以有任意数量的国家。

然后你只需要添加你的数据数组图表：

http://jsfiddle.net/jlbriggs/e2qq2j2L/

来源

2015-11-03 15:36:59 jlbriggs

相关：如果你希望你的图表的高度是动态的，基于国家的数量，就可以适应这个例子：http://jsfiddle.net/jlbriggs/kpu5d1qf/ – jlbriggs

完美谢谢！正如话题....如果我要保存在一个单独的文件中，导入我的json数据的好方法是什么。正在考虑将它保存在一个名为（json_data.json）的单独文件中。 @jibriggs –

你可以把它作为一个.js文件加上一个脚本标签，我想。或者，如果你想从服务器动态创建它，你可以使用jQuery的$ .getJSON（）函数 – jlbriggs

如何正确显示我的高图表并导入数据？

回答

相关问题