Pour passer dynamiques tableau json à Highcharts Graphique à secteurs

J'ai passé chaîne encodée json(par exemple. $TEXTE2 composé ["chrome","15","firefox","20"]) à partir de xcode pour un tableau(par exemple. arr) en javascript.Maintenant je veux passer ce tableau contenant une chaîne json dynamiquement à Highcharts de la Tarte. Le code HTML est

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

Je suis en train d'utiliser getjson méthode bien que m pas au courant de son utilisation.
Depuis que j'ai envie de passer mon tableau, j'.e arr de données[] dans Highcharts,je suis en train de faire:

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

Quelqu'un peut m'aider sur le dis.
Merci à l'avance.

OriginalL'auteur rehan | 2011-11-21

  1. 9

    Je voudrais envelopper l'appel JSON dans le document.prêt de la fonction, puis les envelopper la parcelle un appel dans le getJSON du succès de rappel:

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

    Bien sûr, pour que cela fonctionne, vous devez modifier votre backend code de retour d'un format correct du tableau de tableaux que HighCharts attend:

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

    Vous pourrait "réparer" votre tableau retourné dans le JS, mais il serait préférable de le faire dans le JSON backend appel.

    Je veux convertir le tableau retourné en JS, j'ai essayé plusieurs méthodes, mais incapable de le faire dans ce format, par exemple. [['chrome',15],['firefox',20]] qui est le format acceptable de Highcharts
    Sa fait mec,Merci beaucoup pour votre aide 🙂
    Donc, à ce moment, tout fonctionne bien ?
    Je suis confronté au même problème que vous aviez rencontrés au cours de highcharts. pouvez-vous m'aider comment faire pour obtenir ces dans ce format particulier [['chrome',15],['firefox',20]]. Aussi j'ai posté la question s'il vous plaît vérifier à l'Aide de Highcharts affichage donut hightchart avoir des données dynamiques

    OriginalL'auteur Mark

  2. 1
    <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>

    OriginalL'auteur Abhisek Das

  3. 0

    Il suffit de faire :

    Créer une matrice avec Jquery comme ci-dessous : 

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

    //Ensuite appeler ce tableau avec HighCharts que les données

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

    //Testé et il fonctionne avec un simple objet javascript :

    Object Part1Name: 25 Part2Name: 75__proto__: Object

    OriginalL'auteur Xanarus

  4. 0

    Vous pouvez lier graphique avec les données JSON, directement. Vous avez juste besoin de mettre le json noms de propriété en tant que highchart standard. 'Y' pour la valeur et 'nom' pour l'étiquette.

    Votre JSON doit être comme suit:

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

    OriginalL'auteur zerg