如何正确显示高图并导入数据？ [英] How can I display my high-chart correctly and import data?
问题描述
在我的highchart如何设置Y轴（dataItem），以便它将根据国家在我的json数据中出现的次数填充。所以在我的代码片段应该显示GB为66％，而不是两个33％？
此外，如果我保存在单独的文件中，那么导入我的json数据的好方法是什么。正在考虑将它保存在一个名为（json_data.json）的单独文件中。
请帮助。
div class =snippetdata-lang =jsdata-hide =false>
$（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} //构建图表$（'＃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：指针'，dataLabels：{enabled：false}，showInLegend：true}}，系列：[{name：Try，colorByPoint：true，data：dataList} }）;
< head& < meta http-equiv =Content-Typecontent =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示例< / title> < / head>< div id =containerstyle =min-width：310px; height：400px; max-width：600px; margin：0 auto>< / div>
然后，您需要计算百分比，并以Highcharts可以使用的方式格式化数据。
您可以循环遍历它并构建您的第一个设置如下：
var countryCounts = {};
var countryNames = [];
var totalCount = 0;
//通过对象循环
$ .each（json，function（i，node）{
//获取国家名称
var countryName = node [Country];
//构建唯一国家名称数组
if（$。inArray（countryName，countryNames）== -1）{
countryNames .push（countryName）;
}
//为国家名称添加或增加计数
if（typeof countryCounts [countryName] =='undefined'）{
countryCounts [countryName] = 1;
}
else {
countryCounts [countryName] ++;
}
//增加总数， ％
totalCount ++;
}）;
这就是你需要计算的。
然后，您可以循环浏览您的国家/地区名称并构建一个数据数组：
var data = []
//循环通过唯一的国家来构建图表数据
$ .each（countryNames，function（i，countryName）{
data.push（{
name ：countryName，
y：Math.round（（countryCounts [countryName] / totalCount）* 100）
}）;
}）;
这会保持动态，以便您可以拥有任何数量的国家/地区。
然后，您只需将数据数组添加到图表中：
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>
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:
这篇关于如何正确显示高图并导入数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
