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

Question

在我的 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",
     }
];



   var listData=json;
            console.log(listData);
   var dataList = []
   var dataItem;
   for (var i = 0; i < listData.length; i++) {
      dataItem={
    name: listData[i].Country,
    y: 1
      }
      dataList.push(dataItem); //dataItem push
   }
        // 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
            }]
        });
   
   
    });

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

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

Answer 1

您需要遍历数据并计算出现次数。

然后您需要计算百分比，并以 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/

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

How can I display my high-chart correctly and import data?

charts

json

highcharts

jsonobject