如何使用 Angular 应用程序的 highcharts 显示实时数据？答案

【问题标题】：How to display real time data using highcharts for Angular application?如何使用 Angular 应用程序的 highcharts 显示实时数据？
【发布时间】：2020-03-16 15:47:15
【问题描述】：

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

使用 highcharts 的推荐方法是什么？我查看了 highchart 示例，但它们都包含静态数据。我找不到任何清晰的 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]
      }
    ]
  };
}

【问题讨论】：

标签： angular highcharts signalr angular8

【解决方案1】：

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

关注SignalRDemo。

【讨论】：

【解决方案2】：

official Highcharts Angular wrapper 的演示应用程序包含一个动态数据获取示例 (demo #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
    }
  };

【讨论】：