0
私はamchart
を使用して、API応答データであるJSONデータである とそれが完全に動作するチャートをレンダリングしています。今私は応答のデータを取得した後にも行われる応答JSONを取得するためのAPI呼び出し要求を行う選択ドロップダウンに基づいてデータを更新する必要があります。amchartsデータを角型チャートで更新
$scope.changeYearFunction = function(){
console.log($scope.selectedYear);
chartService.getDataByMonth($scope.selectedYear).then(function(response){
$scope.monthdata = response.data;
\t $scope.$apply();
})
}
$scope.monthChart = function(year){
chartService.getDataByMonth('2016').then(function(response){
$scope.monthdata = response.data;
\t $scope.finishloading = true;
\t console.log($scope.monthdata);
\t $scope.amChartOptions = {
\t \t data : $scope.monthdata,
\t \t type: "serial",
\t \t theme: "light",
\t \t marginRight: 80,
\t \t balloon: {
\t \t cornerRadius: 6,
\t \t horizontalPadding: 15,
\t \t verticalPadding: 10
\t \t },
\t \t chartScrollbar: {
\t \t enabled: true,
\t \t },
\t \t valueAxes: [{
\t \t gridAlpha: 0.5,
\t \t gridColor: '#dddddd',
\t \t }],
\t \t graphs: [{
\t \t bullet: 'square',
\t \t bulletBorderAlpha: 1,
\t \t bulletBorderThickness: 1,
\t \t fillAlphas: 0.5,
\t \t //fillColorsField: 'lineColor',
\t \t legendValueText: '[[value]]',
\t \t //lineColorField: 'lineColor',
\t \t title: 'power',
\t \t valueField: 'power'
\t \t }],
\t \t chartCursor: {
\t \t //categoryBalloonDateFormat: 'MMM',
\t \t cursorAlpha: 0,
\t \t fullWidth: true
\t \t },
\t \t //dataDateFormat: "MM",
\t \t categoryField: "month",
\t \t export: {
\t \t enabled: true
\t \t } \t \t
\t }
})
}();
<div class="panel-heading"><span>Monthly Consumption</span>
\t <select ng-model="selectedYear" ng-change="changeYearFunction()">
\t \t <option ng-repeat="x in year" value={{x}}>{{x}}</option>
\t </select>
</div>
<div class="panel-body">
\t <div style="height: 450px; width: 100%;">
\t \t <am-chart ng-if="finishloading" id="myAreaChart" options="amChartOptions"></am-chart>
\t </div>
</div>
それは動作しません。何が「TypeError例外を:未定義のプロパティ 『データ』を設定することはできません」と言う –
はい、あなたはデフォルトのamchartの設定を持っている必要がありません。私は私の答えを更新しました – Leguest
ご返信ありがとうございます、しかし、この修正をありがとうございます、それは動作しますが、1つの問題は、ページを読み込むときにデータがないし、 ... –