用于具有动态ajax数据的Highcharts

I'm learning Javascript and AngularJS by integrating two examples: Spring MVC and AngularJS and AngularJS and Highcharts.

我正在学习Javascript和AngularJS，通过集成两个示例:Spring MVC和AngularJS、AngularJS和Highcharts。

This seemingly simple task has puzzled me for a few days: In the Spring REST-powered backend, I added the class Book with a property "prices", an array of doubles to represent the monthly or yearly prices of the book. The AngularJS client shows the "prices" by adding the following code to html:

这个看似简单的任务让我困惑了好几天:在Spring rest驱动的后端，我添加了带有属性“price”(价格)的班级图书，一组双精度的图书代表了这本书的月或年价格。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>

and the following code to the controller:

控制器的代码如下:

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

The table updates dynamically with the data from the backend. Pretty neat and elegant!

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

What baffles me is the highcharts part. I added the following to the html:

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

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

and some static values for the "prices" to the controller:

以及控制器的“价格”的一些静态值:

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
}

And the hichcharts works fine with AngularJS.

hichcharts和AngularJS很搭。

I then tried to update the dynamic "prices" from the backend to the chart by adding some code to the controller:

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

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

and after some time realized this was a quite naive understanding of AngularJS. I've also followed the way described in

过了一段时间，我意识到这是对盎格鲁人的天真理解。我也遵循了书中描述的方式

How to produce a highchart (using angular js) with json data coming from an Ajax request without success.

如何使用来自Ajax请求的json数据生成一个highchart(使用角度js)，但没有成功。

Is there an elegant way like the prices table shown above for the Highcharts to display the dynamic data from backend?

是否有一种优雅的方式像上面显示的价格表那样显示来自后端的动态数据?

1 个解决方案

#1

Try changing the data in your chart config directly:

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

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

Or use an object for the series:

或使用该系列的对象:

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
}

Then later:

之后:

prices.data = [60.5, 55.7]

#1