Question

在我的高潮图上，如何设置Y AXIS（dataItem），以便相应地填充国家/地区在json数据中出现的次数。所以在我的代码片段中，它应该显示GB为66％而不是两个33％？

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

请帮忙。

＆＃13;

 $(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
            }]
        });
			
			
    });

＆＃13;

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

＆＃13;

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/

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

1 个答案: