Fusioncharts 数据已格式化但未正确加载

Question

我正在编写股票应用程序 - 我有一个股票价值和日期列表，我想使用融合图表绘制图表。现在我的数据如下所示：

$scope.chartData = [ { "label": "2017-05-11 16:00:00", "value": "930.6" }, { "label": "2017-05-10", "value": "928.78" }, { "label": "2017-05-09", "value": "932.17" }, { "label": "2017-05-08", "value": "934.3" }, { "label": "2017-05-05", "value": "927.13" }, { "label": "2017-05-04", "value": "931.66" }, { "label": "2017-05-03", "value": "927.04" }, { "label": "2017-05-02", "value": "916.44" }, { "label": "2017-05-01", "value": "912.57" }, { "label": "2017-04-28", "value": "905.96" } ]

控制器看起来像这样：

App.controller('StockController', [ '$scope', '$http', '$routeParams',
        '$rootScope', function($scope, $http, $routeParams, $rootScope) {
            $scope.dataSource ={};
            $scope.chartData = [];

            $scope.getStockData = function(stockID) {
                $scope.loading = true;
                $scope.content = false;
                $http.get('/stock', {
                    params : {
                        stockID : encodeURI(stockID)
                    }
                }).then(function(response) {
                    $scope.showError = false;
                    $scope.stock = response.data;
                    $scope.stockAvailable = true;

                    const r = response.data.dates.map((d, i) => Object.assign({
                          label: d,
                          value: response.data.stockValues[i]
                        }))

                    $scope.data = JSON.stringify(r, null, 10);
                    $scope.chartData = $scope.data;
                    $scope.dataSource = {
                            chart: {
                                "caption": "Price of the stock",

                            },
                            data: $scope.chartData
                            };

                }, function(response) {
                    $scope.showError = true;
                }).finally(function() {
                    // called no matter success or failure
                    $scope.loading = false;
                    $scope.content = true;

                  });
            };
        } ]);

HTML部分图表：

<div ng-controller="StockController" ng-show="content">
        <fusioncharts width="100%" height="400" type="line"
            dataFormat="json" dataSource="{{dataSource}}"> </fusioncharts>
    </div>

问题是，当我尝试在页面上打印 $scope.chartData 时，它正确打印了数组，但是当我将 Fusion Chart 数据分配给它时，出现错误：

Uncaught TypeError: Cannot read property 'length' of undefined

所以我认为数据没有加载到图表中。你知道为什么吗？

Answer 1

我设法解决了这个问题 - 问题是我使用了 JSON.stringify，它添加了额外的新行符号，使得 JSON 对于 FusionCharts 不可读。

解决方案是简单地将我的值数组传递给图表数据：

const r = response.data.dates.map((d, i) => Object.assign({
                      label: d,
                      value: response.data.stockValues[i]
                    }))
$scope.dataSource.data = r;

Fusioncharts 数据已格式化但未正确加载

Fusioncharts data formatted but not loading properly

fusioncharts

angular