AngularJS for Highcharts带有动态Ajax数据 [英] AngularJS for Highcharts with dynamic ajax data

问题描述

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

这个看似简单的任务使我困惑了几天：
在Spring REST驱动的后端中，我添加了Book类，其中包含一个属性prices ，这是一组代表本书每月或每年价格的双打。 AngularJS客户端通过向html添加以下代码来显示价格：

 < div style =height：300px;宽度：250像素;溢出：汽车;浮动：左;> 
< table class =table table-striped> 
< tr ng-repeat =book.prices中的价格> 
< td> {{价格}}< / 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 =chart1config =chartConfig>< / highchart> 
< / div> 
  

以及控制器的价格的一些静态值：

  var prices = [60.5，55.7]; //静态数据工程
 
 $ scope.chartConfig = {
 options：{
图表：{
类型：'line'
} 
 $，
系列：[{
数据：价格
}]，
标题：{
 text：'每月图书价格'
}，
 
 loading：false 
} 
  

hichcharts正常工作AngularJS。

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

  // var prices = [60.5，55.7]; //静态数据工作
 var price = $ scope.book.prices 
  

或 p>

  // var prices = [60.5，55.7]; //静态数据工作
 var price = [$ scope.book.prices] 
  

和经过一段时间才意识到这是对AngularJS的一种相当天真的理解。我也遵循了

，但没有成功。 >

是否有像上面显示的价格表一样的优雅方式让Highcharts显示后端的动态数据？

解决方案

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

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

或者为该系列使用一个对象：

  var prices = {data：[60.5，55.7]}; //静态数据工程
 
 $ scope.chartConfig = {
 options：{
图表：{
类型：'line'
} 
 $，
系列：[价格]，
标题：{
 text：'每月预订价格'
}，
 
 loading：false 
 
  

然后：

  prices.data = [60.5,55.7] 
  

I'm learning Javascript and AngularJS by integrating two examples: Spring MVC and AngularJS and AngularJS and 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:

<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:

<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.

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

or

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

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

解决方案

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]

这篇关于AngularJS for Highcharts带有动态Ajax数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！