3

我通过集成两个示例来学习 Javascript 和 AngularJS：Spring MVC 和 AngularJS以及AngularJS 和 Highcharts。

这个看似简单的任务让我困惑了几天：在 Spring REST 驱动的后端中，我添加了带有属性“价格”的 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});
 }

该表使用来自后端的数据动态更新。相当整洁和优雅！

令我困惑的是highcharts部分。我在 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 的一种非常幼稚的理解。我也遵循了中描述的方式

如何使用来自 Ajax 请求的 json 数据生成高图（使用 Angular js）但未成功。

有没有像上面显示的价格表那样优雅的方式来显示来自后端的动态数据？

4

1 回答 1

3

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

$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]
于 2014-02-15T19:22:42.703 回答