Question

如何使用angularjs在canvasjs中显示动态数据。我从api获取数据，并希望在图表中显示。我不知道如何将变量分配给chart的y点。我得到的值并存储在变量＆＃34; ValueinCm＆＃34;而不是静态变量需要分配动态值。

    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script>
        var filledValue;
        var app = angular.module('myApp', ["ng-fusioncharts"])
        app.controller('MyController', function ($scope, $http) {
            $http.get('https://example.com', {
                headers: { 'Authorization': 'Basic password==' }
            })
            .then(function (response) {
                $scope.names = response.data;
                $scope.decodedFrame = atob($scope.names.dataFrame);
                $scope.decodedFrameNew = $scope.decodedFrame.substring(4);
                $scope.distanceinFeet = $scope.decodedFrameNew * 12.5*2.54;
                $scope.Value = $scope.distanceinFeet / 148;
                $scope.ValueinCm = $scope.Value.toFixed(2);
                 filledValue = $scope.ValueinCm;
                 console.log(filledValue);
            });
        });
        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",//theme1
                title: {
                    text: "Basic Column Chart - CanvasJS"
                },
                animationEnabled: false,   // change to true
                data: [
                {
                    // Change type to "bar", "area", "spline", "pie",etc.
                    type: "column",
                    dataPoints: [
                        { label: "apple", y: filledValue },
                        { label: "orange", y: 15 },
                        { label: "banana", y: 25 },
                        { label: "mango", y: 30 },
                        { label: "grape", y: 28 }
                    ]
                }
                ]
            });
            chart.render();
        }
        </script>
</head>
<body ng-app="myApp">
    <div ng-controller="MyController">
        <div id="chartContainer" style="height: 300px; width: 100%;"></div></div>
</body>

Answer 1

获取数据后，需要将其存储到一个变量（比如数据）中，该变量应该是一个对象数组。您需要确保，此变量以CanvasJS规定的格式存储数据。稍后您可以使用此变量代替静态数据。

dataPoints: data

这是一个有效的jsFiddle

如何使用angularjs在canvasjs图表中分配动态值

1 个答案: