问题：

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

郑正阳

2023-03-14

我正在用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 at对象。a、错误(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)在一张图表上。初始系列(http://code.highcharts.com/highcharts.js:248:70)在http://code.highcharts.com/highcharts.js:271:370在阵列上。在a.each的forEach（本地）(http://code.highcharts.com/highcharts.js:27:360)在一张图表上。第一渲染(http://code.highcharts.com/highcharts.js:271:341)在一张图表上。初始化(http://code.highcharts.com/highcharts.js:247:444)在一张图表上。格塔格斯(http://code.highcharts.com/highcharts.js:246:307)

所以问题是数据的格式在高Charts.js：

高图错误#14

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

如果将字符串作为数据点传递，就会发生这种情况，例如在这样的设置中：

系列：[{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
            }]

edit1错误：

未捕获的语法错误：意外令牌。在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

如何格式化高图表的数据。JS？

谢谢你，

共有2个答案

司空昊阳

2023-03-14

您只需将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/

松鸣

2023-03-14

此问题通过以下代码解决：

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

 });

类似资料：

内容太长，如何在console.log（）中显示完整内容？

我有一个很大的数组，它有很多元素，我需要在控制台中显示它，我使用console.log（），但只显示了一部分。如何显示完整的内容？
如何在CMD中显示文本文件内容？

我想在CMD窗口中显示文本文件的内容。此外，我希望看到添加到文件中的新行，如Unix中的tail-f命令。
如何在Ace编辑器中显示文件内容

我正在测试ace-editor显示服务器上的大型文本文件。由于它吹嘘能够处理高达4百万行的文件，并且具有文本高亮显示功能，这使它成为一个很好的候选者。我一直在努力理解Ace Editor的文档和EditSession。根据我的理解，它可以告诉ace editor从一个文件中读取并显示它。我正在使用createEditSessiont（）创建会话并指定文档。在api文档中： createEdit
如何在Spark Dataframe中显示完整的列内容？

我使用Spark-csv将数据加载到DataFrame中。我想做一个简单的查询并显示内容： co似乎被截断了：如何显示专栏的全部内容？
如何在android中Recylerview中显示更多内容[副本]

我正在开发一个应用程序，其中有recyclerview，在其中我必须显示更多的底部用户滚动加载更多的数据。请帮我解决这个问题。下面是我的片段类，我在其中显示了回收器视图：
如何显示wordpress内容图像api

我想在我的Flitter应用程序中显示图像内容。我使用WordPressAPI。我使用这个类来显示featuredmedia、标题和内容这是wordpress的内容 “内容”：{“渲染”：“首相警告议员们，他们试图阻止英国脱欧，从而损害了他与欧盟达成协议的机会。鲍里斯·约翰逊（Boris Johnson）表示，英国将在10月31日“要么做，要么死”退出欧元区——这促使一些议员采取行动，阻止英国

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档