How can I display my high-chart correctly and impo

2019-09-10 10:49发布

站内问答 / 后端开发
1141 1 6

On my highchart how can I set the Y AXIS (dataItem) so that it will populate accordingly to amount of times a country appears in my json data. So in my snippet it should show GB as 66% instead of two 33%?

Also what would be a good way to import my json data if I was to keep in in a separate file. Was thinking of keeping it in a separate file called (json_data.json).

Please help.

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

1条回答
Emotional °昔
2楼-- · 2019-09-10 11:05

You need to loop through your data and count the occurrences.

Then you need to calculate the percentages, and format the data in a way that Highcharts can use.

You can loop through it and build your first set up something like this:

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++;
});

That gives you what you need to calculate from.

Then you can loop through your country names and build a data array:

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)
    });
});

This keeps it dynamic so that you can have any number of countries.

Then you just add your data array to your chart:

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)