如何在 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>

经过代码测试，我有一个问题：

未捕获的错误：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 （本机） 在 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)

所以问题在于 highCharts.js 中的数据格式：

Highcharts 错误 #14

发送到 series.data 的字符串值，预期数字

如果您将字符串作为数据点传入，例如在 设置如下：

series: [{ data: ["3", "5", "1", "6"] }] Highcharts 期望数据 值是数字。最常见的原因是数据是 从 CSV 或 XML 源解析，而实施者忘记了 在解析后的值上运行 parseFloat。

出于性能原因，不执行内部类型转换，并且 仅检查第一个值（从 2.3 开始）。

编辑1：

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

编辑1错误：

未捕获的语法错误：意外的标记。在 y 中：{Stat.resNotCon}

编辑2：

$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 

highCharts.JS如何格式化数据？

谢谢，

Answer 1

问题通过以下代码解决：

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

 });

Answer 2

您只需将 Stat 的值存储在变量中，而不是将其绑定到范围。

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/