Question

我通过整合两个示例来学习Javascript和AngularJS：Spring MVC and AngularJS和AngularJS and Highcharts。

这个看似简单的任务让我困惑了几天：在Spring支持的Spring后端，我添加了一个带有“价格”属性的类Book，这是一组双打来表示该书的月度或年度价格。 AngularJS客户端通过将以下代码添加到html来显示“价格”：

<div style="height:300px;width:250px;overflow:auto;float:left;">
    <table class="table table-striped">
       <tr ng-repeat="price in book.prices">
          <td>{{price}}</td>
       </tr>
    </table>
</div>

以及控制器的以下代码：

 var bookId = $routeParams.bookId;
 if (bookId === 'new') {
    $scope.book = new Book();
 } else {
    $scope.book = Book.get({bookId: bookId});
 }

该表使用后端的数据动态更新。非常整洁优雅！

令我感到困惑的是高调部分。我在html中添加了以下内容：

<div style="border: 1px solid #ccc; width: 620px; float: right">
     <highchart id="chart1" config="chartConfig"></highchart>
</div>

和控制器“价格”的一些静态值：

var prices = [60.5, 55.7]; // Static data works

$scope.chartConfig = {
    options : {
        chart : {
            type : 'line'
        }
    },
    series : [ {
        data : prices 
    } ],
    title : {
        text : 'Monthly Book Prices'
    },

    loading : false
}

hichcharts与AngularJS一起工作正常。

然后我尝试通过向控制器添加一些代码来更新从后端到图表的动态“价格”：

// var prices = [60.5, 55.7]; // Static data works
var prices = $scope.book.prices

或

// var prices = [60.5, 55.7]; // Static data works
var prices  = [$scope.book.prices]

经过一段时间的实现，这是对AngularJS的一种非常天真的理解。我也按照

中描述的方式进行操作

How to produce a highchart (using angular js) with json data coming from an Ajax request没有成功。

是否有一种优雅的方式，如上面显示的价格表，Highcharts显示来自后端的动态数据？

Answer 1

尝试直接更改图表配置中的数据：

$scope.chartConfig.series[0].data = $scope.book.prices

或者使用该系列的对象：

var prices = {data: [60.5, 55.7]}; // Static data works

$scope.chartConfig = {
    options : {
        chart : {
            type : 'line'
        }
    },
    series : [ prices ],
    title : {
        text : 'Monthly Book Prices'
    },

    loading : false
}

然后：

prices.data = [60.5, 55.7]

具有动态ajax数据的AngularJS for Highcharts

1 个答案: