Javascript AngularJS用于动态ajax数据的Highcharts

我通过集成两个示例来学习Javascript和AngularJS：和

这项看似简单的任务让我困惑了几天： 在SpringRest驱动的后端，我添加了带有属性“prices”的类书，这是一个双倍数组，表示书的每月或每年价格。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>

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

让我困惑的是海图部分。我在html中添加了以下内容：

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

hichcharts和AngularJS配合得很好

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

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

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
}

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

或

过了一段时间，我意识到这是对AngularJS相当天真的理解。我也遵循了中描述的方法

没有成功

---

对于Highcharts，是否有一种优雅的方式（如上图所示的价格表）来显示后端的动态数据？

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

$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]

---

您不需要在加载数据后重新加载图表吗？请参见第一个示例。该图表应该在按下UI上的一个按钮后重新加载（如书籍详细信息）。谢谢，你节省了我的时间@Pablojim

prices.data = [60.5, 55.7]