如何正確顯示我的高圖表並導入數據？

在我的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

如何正確顯示我的高圖表並導入數據？

回答

相關問題