Discussion :

[syrine01]

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,

[Invité]

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}