3

Spring MVC と AngularJSおよびAngularJS と Highchartsの 2 つの例を統合して、Javascript と AngularJS を学習しています。

この一見単純なタスクは、数日間私を困惑させました。Spring REST を利用したバックエンドで、ブックの月間または年間の価格を表す double の配列である「価格」プロパティを持つクラス 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 の非常に素朴な理解であることに気付きました。私もで説明されている方法に従いました

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 に答える