HighChartsにコンテンツ$ scopeを表示するには？

Question

私は、angularJsとhighChartsJSを使用して統計グラフを作成しています。ここで

は、コードangularJSです：

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

HTMLコード：コードのテストの後

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

、私は問題を抱えている：

Uncaught Error: Highcharts error #14: www.highcharts.com/errors/14 at Object.a.error (http://code.highcharts.com/highcharts.js:10:49) at k.setData (http://code.highcharts.com/highcharts.js:289:213) at k.init (http://code.highcharts.com/highcharts.js:282:174) at a.Chart.initSeries (http://code.highcharts.com/highcharts.js:248:70) at http://code.highcharts.com/highcharts.js:271:370 at Array.forEach (native) at a.each (http://code.highcharts.com/highcharts.js:27:360) at a.Chart.firstRender (http://code.highcharts.com/highcharts.js:271:341) at a.Chart.init (http://code.highcharts.com/highcharts.js:247:444) at a.Chart.getArgs (http://code.highcharts.com/highcharts.js:246:307)

だから、問題がありますhighCharts.jsのデータのフォーマットは次のとおりです。

Highcharts Error #14

String value sent to series.data, expected Number

This happens if you pass in a string as a data point, for example in a setup like this:

series: [{ data: ["3", "5", "1", "6"] }] Highcharts expects the data values to be numbers. The most common reason for this is that data is parsed from CSV or from a XML source, and the implementer forgot to run parseFloat on the parsed value.

For performance reasons internal type casting is not performed, and only the first value is checked (since 2.3).

EDIT1：EDIT1の

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

エラー：

Uncaught SyntaxError: Unexpected token. in y: {Stat.resNotCon}

EDIT2：foのデータをフォーマットする方法

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

       console.log("$scope "+$scope.Stat); //it's empty 

       var Stat=$scope.Stat; 

       console.log("after "+Stat); // it's empty 

r highCharts.JS？

は、あなただけの変数で統計の値を格納し、スコープにバインドしないように持って、

Answer 1

、ありがとうございました。

var app = angular.module('myApp',[]); 
app.controller("StatController",function($scope,$http,$window, $filter) 
{ 
    $scope.FindStats = function() { 
    $scope.Stat = { 
     "idStat": 21, 
     "nbrBoks": 7, 
     "nbSection": 5, 
     "total": 135, 
     "resCon": 0.0518519, 
     "resNotCon": 0.037037 
    }; 
} 
$scope.FindStats(); 
var Stat = $scope.Stat; 


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', 
      }] 
     }] 
    }); 
}); 

実施例

http://jsfiddle.net/ADukg/11648/

Answer 2

問題は、次のコードを介して解決される：本]を参照して

var app = angular.module('myApp',[]); 
app.controller("StatController",function($scope,$http,$window, $filter,$RootScope) 
{ 
    $RootScope.FindStats = function() { 
    $scope.Stat = { 
     "idStat": 21, 
     "nbrBoks": 7, 
     "nbSection": 5, 
     "total": 135, 
     "resCon": 0.0518519, 
     "resNotCon": 0.037037 
    }; 

     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, 
       color: '#00c853', 
      },{ 
       name: 'Result of section', 
       y:Stat.resCon, 
       color: '#b71c1c', 
      }] 
     }] 
    }); 
} 
$scope.FindStats(); 

});