IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AngularJS Discussion :

Comment afficher le contenu de $scope en Highcharts ?


Sujet :

AngularJS

  1. #1
    Membre habitué
    Femme Profil pro
    Architecte de système d'information
    Inscrit en
    Février 2012
    Messages
    404
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Février 2012
    Messages : 404
    Points : 127
    Points
    127
    Par défaut Comment afficher le contenu de $scope en Highcharts ?
    Bonjour,

    Actuellement, Je suis entrain de faire un graphique statistique en utilisant AngularJS et highChartsJS.

    Voici le code AngularJS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    app.controller("StatController",function($scope,$http,fileUpload,$window, $filter)
     {
    var ids=location.search; // id ressource
     
    $scope.FindStats=function(){
     
                       $http.get(url+"/Stats"+ids) 
                        .success(function(data){
                            $scope.Stat = data;
                          console.log(JSON.stringify($scope.Stat));//{"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037}
                        }).error(function(err,data){
                            console.log("error:" 
                           +data);
                        }); 
                    };      
     
                    $scope.FindStats();
     });
    Code HTML5:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
     
     
       <script src="http://code.highcharts.com/highcharts.js"></script>
       <script src="http://code.highcharts.com/highcharts-more.js"></script>
       <script src="http://code.highcharts.com/modules/exporting.js"></script> 
     
     
    <div>
     {{Stat}} 
    <!--{"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037} -->
    </div>
     
     <script type="text/javascript">
         Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.2f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.2f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: 'Brands',
                colorByPoint: true,
                data: [{
                    name: 'Result of books',
                    y: '{Stat.resNotCon}', // error is here
                    color: '#00c853',
                },{
                    name: 'Result of section',
                    y:'{Stat.resCon}', //error is here
                    color: '#b71c1c',
                }]
            }]
        });
    </script>
    Après un test du code, j'ai un problème:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    Uncaught Erreur: Erreur Highcharts # 14: www.highcharts.com/errors/14 à Object.a.error ( http://code.highcharts.com/highcharts.js:10:49 ) à k.setData ( http: / /code.highcharts.com/highcharts.js:289:213 ) à k.init ( http://code.highcharts.com/highcharts.js:282:174 ) à a.Chart.initSeries ( http: // Code .highcharts.com / highcharts.js: 248: 70 ) à http://code.highcharts.com/highcharts.js:271:370 à Array.forEach (native) à a.each ( http: //code.highcharts .com / highcharts.js: 27: 360 ) à a.Chart.firstRender ( http://code.highcharts.com/highcharts.js:271:341 ) à a.Chart.init ( http: //code.highcharts .com / highcharts.js: 247: 444 ) à a.Chart.getArgs ( http://code.highcharts.com/highcharts.js:246:307 )
    Le problème est donc le format des données en highCharts.js:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Highcharts Erreur # 14
     
    Valeur de chaîne envoyée à series.data, Nombre prévu
     
    Cela se produit si vous passez dans une chaîne comme point de données, par exemple dans une configuration comme ceci:
     
    série: [{data: [ "3", "5", "1", "6"]}] Highcharts attend les valeurs de données à des chiffres. La raison la plus courante est que les données sont analysées à partir de CSV ou d'une source XML, et le réalisateur a oublié de courir parseFloat sur la valeur analysée.
     
    Pour des raisons de performance coulée de type interne n'est pas effectuée, et que la première valeur est vérifiée (depuis 2.3).

    Edit1:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    data: [{
                    name: 'Result of books',
                    color: '#00c853',
                    y: {Stat.resNotCon} // error is here
                },{
                    name: 'Result of section',
                    color: '#b71c1c',
                     y: {Stat.resCon} //error is here
                }]
    J'ai ce problème pour Edit1:
    Uncaught SyntaxError: Unexpected token. in y: {Stat.resNotCon}
    Existe-il une solution pour formater les données envoyées dans le $scope d'angularJS pour Highcharts ?

    Merci,

  2. #2
    Invité
    Invité(e)
    Par défaut
    Prends l'exemple Highcharts.chart sur le site de HighChart avec le modèle de données exemple, puis fait le tourner dans ton site.
    Ensuite, formate $scope.stats exactement comme était formaté le modèle de données de l'exemple.
    A priori,les valeurs sont déjà du INT dans ton objet $scope.stats(pas de quotes sur les valeurs), donc, je ne vois pas pourquoi il faudrait utiliser parseFloat.
    J'ai plutôt l'impression que HighCharts attends un tableau d'objets, et pas un objet unique.
    Si HighCharts attends un modèle de données de ce type :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    [{data: [ "3", "5", "1", "6"]}]
    Alors c'est normal que ton format ne passe pas, vu que c'est un objet unique:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    {"idStat":21,"nbrBoks":7,"nbSection":5,"total":135,"resCon":0.0518519,"resNotCon":0.037037}

Discussions similaires

  1. Comment afficher le contenu d'un fichier ini dans un mémo?
    Par Jayceblaster dans le forum Langage
    Réponses: 7
    Dernier message: 13/05/2014, 18h38
  2. Comment afficher le contenu d'une variable ?
    Par innova dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 28/06/2007, 12h45
  3. Réponses: 4
    Dernier message: 19/10/2006, 17h24
  4. Comment afficher le contenu d'une cassette DAT?
    Par prefna dans le forum Périphériques
    Réponses: 1
    Dernier message: 24/07/2006, 14h46
  5. Réponses: 23
    Dernier message: 07/02/2006, 18h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo