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数据已格式化但未正确加载

1 个答案: