Чтобы передать динамический массив json в круговую диаграмму Highcharts

Я передал закодированную строку json (например, $ TEXT2, состоящую из ["chrome", "15", "firefox", "20"]) из xcode в массив (например, arr) в javascript. Теперь я хочу передать этот массив, содержащий json динамически в Highcharts Pie. HTML-код

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=20, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie chart</title>

<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">

var chart;
var arr = $TEXT2;

$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
</script>
<body>
<br>
<!-- 3. Add the container -->
<div id="container" style="width: 300px; height: 350px; margin: 0 auto"></div>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
</body>
</html>

Я пытаюсь использовать метод getjson, хотя не знаю о его использовании. Поскольку я хочу передать свой массив, т.е. arr в data[] в Highcharts, я делаю:

$.getJSON("arr", function(json) {
chart.series = json;               
var chart = new Highcharts.Chart(chart);
     });

Может ли кто-нибудь помочь мне с дис. Заранее спасибо.


arrays json highcharts
person rehan    schedule 21.11.2011    source источник

Ответы (3)


arrow_upward
9
arrow_downward

Я бы обернул вызов JSON в функцию document.ready, а затем обернул бы вызов plot в обратном вызове успеха getJSON:

$(document).ready(function() {

  $.getJSON("arr", function(json) {

    chart = new Highcharts.Chart({
      chart: {
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: 'Interactive Pie'
      },
      tooltip: {
        formatter: function() {
          return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          showInLegend: true
      },
      series: [{
        type: 'pie',
        name: 'Browser share',
        data: json
      }]
    });
  });
});

Конечно, чтобы это работало, вы должны изменить свой внутренний код, чтобы он возвращал правильно отформатированный массив массивов, который ожидает HighCharts:

[["chrome",15],["firefox",20]]

Вы можете «исправить» возвращаемый массив в JS, но лучше сделать это в бэкэнд-вызове JSON.

person Mark    schedule 21.11.2011
comment
Я хочу преобразовать возвращаемый массив в JS, я пробовал несколько методов, но не смог сделать это в этом формате, например. [['chrome',15],['firefox',20]], который является приемлемым форматом Highcharts. - person rehan; 22.11.2011
comment
@рехан. Я столкнулся с той же проблемой, с которой вы столкнулись во время хайчартов. Можете ли вы помочь мне, как получить их в этом конкретном формате [['chrome', 15], ['firefox', 20]]. Также я разместил вопрос, пожалуйста, проверьте его. Использование Highcharts отображает пончик hightchart с динамическими данными. - person ANK; 18.01.2017

arrow_upward
0
arrow_downward

Просто сделайте:

Создайте массив с Jquery, как показано ниже:

$.each(data['values'], function(i, val) {
                    x_values_sub['name'] = i
                    x_values_sub['y'] = val
                    x_values.push(x_values_sub);
                    x_values_sub = {};
});

// Затем вызовите этот массив с HighCharts в качестве данных

series: [{
                            type: 'pie',
                            name: null,
                            data: x_values
}]

// Протестировано и работает с простым объектом javascript:

Object Part1Name: 25 Part2Name: 75__proto__: Object
person Xanarus    schedule 10.04.2015

arrow_upward
0
arrow_downward

Вы можете напрямую связать диаграмму с данными JSON. Вам просто нужно установить имена свойств json в качестве стандарта highchart. «Y» для значения и «имя» для метки.

Ваш JSON должен выглядеть следующим образом:

[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]
person aungye    schedule 20.01.2014