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:

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:

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:

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:

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:

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:

Citation:

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,