Uncaught ReferenceError: Tankvalue is not defined

Question

我想在图表中显示响应数据。但是 Tankvalue 超出范围并给出错误消息

Tankvalue is not defined.

如何让变量可以全局访问。由于未定义的值，图表未加载。想要在图表中显示 Tankvalue。

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    $http.get('url', {
            headers: {
                'Authorization': 'Basic Pasword=='
            }
        })
        .then(function (response) {
            $scope.names = response.data;
            $scope.decodedFrame = atob($scope.names.dataFrame);
            var Tankvalue = $scope.decodedFrame.substring(6);


        });
});
FusionCharts.ready(function () {
    var fusioncharts = new FusionCharts({
        type: 'cylinder',
        dataFormat: 'json',
        id: 'fuelMeter-1',
        renderAt: 'chart-container',
        width: '200',
        height: '350',
        dataSource: {
            "chart": {
                "theme": "fint",
                "caption": "Tank",
                "subcaption": "Bakersfield Central",
                "lowerLimit": "0",
                "upperLimit": "25",
                "lowerLimitDisplay": "Empty",
                "upperLimitDisplay": "Full",
                "numberSuffix": " ltrs",
                "showValue": "1",
                "chartBottomMargin": "45",
                "showValue": "0"
            },
            "value": Tankvalue,
            "annotations": {
                "origw": "400",
                "origh": "190",
                "autoscale": "1",
                "groups": [{
                    "id": "range",
                    "items": [{
                        "id": "rangeBg",
                        "type": "rectangle",
                        "x": "$canvasCenterX-45",
                        "y": "$chartEndY-30",
                        "tox": "$canvasCenterX +45",
                        "toy": "$chartEndY-75",
                        "fillcolor": "#6caa03"
                    }, {
                        "id": "rangeText",
                        "type": "Text",
                        "fontSize": "11",
                        "fillcolor": "#333333",
                        "text": "80 ltrs",
                        "x": "$chartCenterX-45",
                        "y": "$chartEndY-50"
                    }]
                }]
            }

        },

    });
    fusioncharts.render();
});

Answer 1

您不能使用其他变量之外的局部变量 function.make 它是全局变量或使用 $scope 将其作为作用域变量。

$scope.Tankvalue = $scope.decodedFrame.substring(6);

Answer 2

Move FusionCharts.ready() inside then block as shown below.
.then(function (response) {
            $scope.names = response.data;
            $scope.decodedFrame = atob($scope.names.dataFrame);
            var Tankvalue = $scope.decodedFrame.substring(6);

            FusionCharts.ready(function () {
                var fusioncharts = new FusionCharts({
                    type: 'cylinder',
                    dataFormat: 'json',
                    id: 'fuelMeter-1',
                    renderAt: 'chart-container',
                    width: '200',
                    height: '350',
                    dataSource: {
                        "chart": {
                            "theme": "fint",
                            "caption": "Tank",
                            "subcaption": "Bakersfield Central",
                            "lowerLimit": "0",
                            "upperLimit": "25",
                            "lowerLimitDisplay": "Empty",
                            "upperLimitDisplay": "Full",
                            "numberSuffix": " ltrs",
                            "showValue": "1",
                            "chartBottomMargin": "45",
                            "showValue": "0"
                        },
                        "value": Tankvalue,
                        "annotations": {
                            "origw": "400",
                            "origh": "190",
                            "autoscale": "1",
                            "groups": [{
                                "id": "range",
                                "items": [{
                                    "id": "rangeBg",
                                    "type": "rectangle",
                                    "x": "$canvasCenterX-45",
                                    "y": "$chartEndY-30",
                                    "tox": "$canvasCenterX +45",
                                    "toy": "$chartEndY-75",
                                    "fillcolor": "#6caa03"
                                }, {
                                    "id": "rangeText",
                                    "type": "Text",
                                    "fontSize": "11",
                                    "fillcolor": "#333333",
                                    "text": "80 ltrs",
                                    "x": "$chartCenterX-45",
                                    "y": "$chartEndY-50"
                                }]
                            }]
                        }

                    },

                });
                fusioncharts.render();
            });

        });

Answer 3

$http.get() 是一个异步函数，因此 FusionCharts.ready() 在分配给 Tankvalue 变量的值之前运行。要在 .then().

中修复此移动 ready() 函数

这样做：

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
    $http.get('url', {
            headers: {
                'Authorization': 'Basic Pasword=='
            }
        })
      .then(function (response) {
        $scope.names = response.data;
        $scope.decodedFrame = atob($scope.names.dataFrame);
        var Tankvalue = $scope.decodedFrame.substring(6);
        FusionCharts.ready(function () {
        var fusioncharts = new FusionCharts({
        type: 'cylinder',
        dataFormat: 'json',
        id: 'fuelMeter-1',
        renderAt: 'chart-container',
        width: '200',
        height: '350',
        dataSource: {
            "chart": {
                "theme": "fint",
                "caption": "Tank",
                "subcaption": "Bakersfield Central",
                "lowerLimit": "0",
                "upperLimit": "25",
                "lowerLimitDisplay": "Empty",
                "upperLimitDisplay": "Full",
                "numberSuffix": " ltrs",
                "showValue": "1",
                "chartBottomMargin": "45",
                "showValue": "0"
            },
            "value": Tankvalue,
            "annotations": {
                "origw": "400",
                "origh": "190",
                "autoscale": "1",
                "groups": [{
                    "id": "range",
                    "items": [{
                        "id": "rangeBg",
                        "type": "rectangle",
                        "x": "$canvasCenterX-45",
                        "y": "$chartEndY-30",
                        "tox": "$canvasCenterX +45",
                        "toy": "$chartEndY-75",
                        "fillcolor": "#6caa03"
                    }, {
                        "id": "rangeText",
                        "type": "Text",
                        "fontSize": "11",
                        "fillcolor": "#333333",
                        "text": "80 ltrs",
                        "x": "$chartCenterX-45",
                        "y": "$chartEndY-50"
                    }]
                }]
            }

        },

    });
    fusioncharts.render();
   });   
  });
});

Uncaught ReferenceError: Tankvalue is not defined

Uncaught ReferenceError: Tankvalue is not defined

html

javascript

fusioncharts

angularjs