如何使用Angular应用程序的高图表显示实时数据

Question

我正在开发一个Angular应用程序，需要在其中可视化实时仪器数据。(例如温度数据(也使用SignalR/websocket。

建议使用高图表的方法是什么？我看过一些高图表的例子，但它们都有静态数据。我找不到任何清晰的Angular文档或一个好的Angular示例可以学习。下面给出的是应用程序组件ts文件。它有静态数据，我应该如何以及在哪里插入实时数据功能

export class AppComponent {
title = 'highchart-demo';
highcharts = Highcharts;
chartOptions = {
chart: {
type: 'spline'
},
title: {
text: 'Monthly Average Temperature'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature °C'
}
},
tooltip: {
valueSuffix: ' °C'
},
series: [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}
]
};
}

Answer 1

我在Github上开发了一个Demo，它为图表(ngcharts(提供实时数据。所以你可以看到它是如何完成的，并适应你的图表。

遵循SignalRDemo。

Answer 2

官方Highcharts Angular包装器的演示应用程序包含一个动态数据获取示例(演示#5(。它使用常规的$.getJSON调用。

示例配置：

// ----------------------------------------------------------------------
// Demo #5
chartLazyLoading: Highcharts.Options = {
chart: {
type: 'candlestick',
zoomType: 'x',
events: {
load: function() {
var chart = this;
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function(data) {
// Add a null value for the end date
data = [].concat(data, [
[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]
]);
chart.addSeries({
data: data,
dataGrouping: {
enabled: false
}
} as Highcharts.SeriesOptionsType, false);
chart.update({
navigator: {
series: {
data: data
}
}
});
});
}
}
},
navigator: {
adaptToUpdatedData: false
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false, // it supports only days
selected: 4 // all
},
xAxis: {
events: {
afterSetExtremes: function(e) {
var chart = this.chart;
/**
* Load new data depending on the selected min and max
*/
chart.showLoading('Loading data from server...');
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?',
function(data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
},
minRange: 3600 * 1000 // one hour
},
yAxis: {
floor: 0
}
};