Для передачи динамического массива JSON в круговую диаграмму Highcharts - PullRequest
Новая
       4

Для передачи динамического массива JSON в круговую диаграмму Highcharts

2 голосов
/ 21 ноября 2011

Я передал строку в кодировке 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);
     });

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

Ответы [ 4 ]

9 голосов
/ 21 ноября 2011

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

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

1 голос
/ 16 июня 2015 
<script type="text/javascript">
    jQuery(document).ready(function () {
        alert('call pie');

        var data1 = $("#dataidd").val();
        alert('pie data' + data1);


        /*--------Pie Chart---------*/
        $('#PieChartDiv').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Comparision and Analysis Report'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Issue Details',
                // data: jQuery.parseJSON(data1)
                data: JSON.parse(data1)

            }]
        });
    });
    </script>
0 голосов
/ 10 апреля 2015

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

Создать массив с 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
0 голосов
/ 20 января 2014

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

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

[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...