Как я могу правильно отображать свою диаграмму и импортировать данные?

На моем highchart, как я могу установить Y AXIS (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

Как я могу правильно отображать свою диаграмму и импортировать данные?

ответ

Смежные вопросы