Как отображать данные в реальном времени, используя высокие графики для приложения Angular?

Question

Я занимаюсь разработкой приложения Angular, в котором мне нужно визуализировать данные с живых инструментов. (например, данные о температуре), также используя SignalR / websocket.

Каков рекомендуемый подход с использованием старших графиков? Я посмотрел на примеры старших диаграмм, но все они содержат данные о состоянии. Я не могу найти никакой понятной Angular документации или хорошего Angular примера для изучения. ниже приведен файл приложения ts. Он имеет данные c, Как и где я должен подключить функциональность данных в реальном времени?

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

Демонстрационное приложение для официальных Highcharts Angular оболочки содержит пример динамического извлечения данных c ( 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
    }
  };

Answer 2

У меня есть демоверсия на Github, которая предоставляет данные в режиме реального времени для диаграммы (ngcharts). Таким образом, вы можете увидеть, как это делается, и приспособиться к своим диаграммам.

Следует SignalRDemo .