To pass dynamic json array to Highcharts Pie Chart

问题

I passed json encoded string(eg. $TEXT2 consisting ["chrome","15","firefox","20"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array containing json string dynamically to Highcharts Pie. The HTML code is

<!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>

I am trying to use getjson method although m unaware of its usage. Since i want to pass my array i.e arr to data[] in Highcharts,I am doing:

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

Can anyone help me on dis. Thanks in advance.

回答1:

I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:

$(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
      }]
    });
  });
});

Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:

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

You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.

回答2:

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

回答3:

Simply do :

Create array with Jquery as bellow :

$.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 = {};
});

// Then call this array with HighCharts as data

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

// Tested and it works with simple javascript object :

Object Part1Name: 25 Part2Name: 75__proto__: Object

回答4:

You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.

Your JSON should be as like follow:

[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]

来源：https://stackoverflow.com/questions/8216090/to-pass-dynamic-json-array-to-highcharts-pie-chart

标签

arrays

json

Highcharts