0
Highcharts-ngは静的データでは動作するようですが、動的データでは動作しません。私は両方のデータセットが似ていますが、動的に作成されたものを使用するときにグラフがレンダリングを拒否します。ここでハイチャート - jsonレスポンスからデータをロードする方法
は私のコントローラのコードです：
$scope.sent_array = [];
$scope.success_array = [];
$scope.failed = [];
$scope.table_data = [];
$scope.date_array = [];
$scope.dateRangeTransactions = function() {
ApiService.dateRange(payload).then(function(response) {
data = response.data;
console.log(data);
for (var i = 0; i < data.length; i++) {
date = data[i].date.replace(/\//g, ",").split(",");
unix_date = Date.UTC(date[0], date[1] - 1, date[2]);
console.log(unix_date);
$scope.sent_array.push([unix_date, data[i].total_sent]);
$scope.success_array.push([unix_date, data[i].total_success]);
$scope.failed.push([unix_date, data[i].total_pending_failed]);
$scope.table_data.push([data[i].date, data[i].total_sent, data[i].total_success, data[i].total_pending_failed]);
$scope.date_array.push(data[i].date);
}
$scope.minDate = $scope.date_array[0];
$scope.maxDate = $scope.date_array[$scope.date_array.length - 1];
console.log($scope.sent_array);
console.log($scope.success_array);
console.log($scope.failed);
$scope.chartConfig.series[0].data = $scope.sent_array;
$scope.chartConfig.series[1].data = $scope.success_array;
$scope.chartConfig.series[2].data = $scope.failed;
}, function(error) {
console.log(error);
});
}
$scope.dateRangeTransactions(payload);
$scope.chartConfig = {
global: {
useUTC: false,
},
chart: {
type: 'column',
height: 500,
width: 900,
backgroundColor: 'transparent',
zoomType: 'x',
},
navigator: {
enabled: false,
series: {
data: []
}
},
rangeSelector: {
enabled: true,
},
plotOptions: {
series: {
lineWidth: 1,
fillOpacity: 0.5,
showInNavigator: true
}
},
exporting: false,
xAxis: [{
type: 'datetime',
title: {
text: 'timeline',
style: {
color: '#80a3ca'
}
},
}],
yAxis: [
{
min: 0,
allowDecimals: false,
title: {
text: 'rate of usage',
style: {
color: '#80a3ca'
}
},
labels: {
format: '{value}',
style: {
color: '#80a3ca'
}
}
}
],
legend: {
enabled: true
},
title: {
text: ' '
},
credits: {
enabled: false
},
loading: true,
tooltip: {
headerFormat: '<div class="header">{point.key}</div>',
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b><br/>',
borderWidth: 1,
borderRadius: 5,
borderColor: '#a4a4a4',
shadow: true,
useHTML: true,
percentageDecimals: 2,
backgroundColor: "rgba(255,255,255,.7)",
style: {
padding: 0
},
shared: true,
},
series: [{
id: 'Sent',
name: 'Sent',
data: [],
tooltip: {
valueSuffix: ' times'
},
color: 'blue'
},
{
id: 'Delivered',
name: 'Delivered',
data: [],
tooltip: {
valueSuffix: ' times'
},
color: 'green'
},
{
id: 'Failed',
name: 'Failed',
data: [],
tooltip: {
valueSuffix: ' times'
},
color: 'red'
}
],
useHighStocks: true,
};とサンプルの応答は次のとおりです。
[{
"date": "2017\/09\/18",
"total_sent": 0,
"total_success": 0,
"total_pending_failed": 0
},
{
"date": "2017\/09\/19",
"total_sent": 2,
"total_success": 0,
"total_pending_failed": 3
},
{
"date": "2017\/09\/20",
"total_sent": 5,
"total_success": 5,
"total_pending_failed": 0
},
{
"date": "2017\/09\/21",
"total_sent": 0,
"total_success": 0,
"total_pending_failed": 0
},
{
"date": "2017\/09\/22",
"total_sent": 0,
"total_success": 0,
"total_pending_failed": 0
},
{
"date": "2017\/09\/23",
"total_sent": 0,
"total_success": 0,
"total_pending_failed": 0
},
{
"date": "2017\/09\/24",
"total_sent": 0,
"total_success": 0,
"total_pending_failed": 0
},
{
"date": "2017\/09\/25",
"total_sent": 3,
"total_success": 3,
"total_pending_failed": 0
}
]私はconsole.log($scope.chartConfig);データが挿入されたようですが、グラフはまだ空のままです。