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） at 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 at Array.forEach（native） at 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 Error＃14

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

如果您将字符串作为数据点传入，例如在a中，则会发生这种情况   设置如下：

系列：[{data：[“3”，“5”，“1”，“6”]}] Highcharts期待数据   值是数字。最常见的原因是数据是   从CSV或XML源解析，实现者忘记了   对解析后的值运行parseFloat。

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

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：意外的令牌。在y：{Stat.resNotCon}

EDIT2：

$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

通过以下代码解决了该问题：

string

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/

如何在HighCharts中显示内容$ scope？

2 个答案: