Динамические обновления multible series Highcharts с одноточечным XML-файлом

Question

Я немного из своей зоны комфорта, так как я обычно занимаюсь аналитикой и не причудливыми интерфейсами. Тем не менее, я хотел бы иметь демонстрацию в реальном времени некоторых из моих работ, поэтому становится понятнее, а не только числа в матрице. Я посмотрел вокруг и нашел что-то пол-актуальное и так далеко:

(Он имеет четыре серии, как я хочу, и это итерация - до некоторой степени) https://jsfiddle.net/023sre9r/

var series1 = this.series[0], 
series2 = this.series[1], 
series3 = this.series[2], 
series4 = this.series[3]; 

Но я полностью потерянным о том, как удалить генераторы случайных чисел, не теряя приятных вещей, таких как количество точек данных в представлении (похоже, зависит от цикла for ?!). Удалите дополнительный заголовок «Значения» рядом с моим реальным названием оси y. И причина в том, как каждую секунду получать новую точку данных из XML-файла.

В идеале я хочу иметь XML-файл, содержащий 4 значения, которые я обновляю примерно каждые 200 мс в MATLAB. И каждую секунду мне хотелось бы обновить мою диаграмму 4-й серии. Разве это не так легко, если вы знаете, что делаете ?! :-)

Заранее благодарен!

Answer 1

Я упростил ваш пример и добавил четкий код, показывающий, как извлекать данные с сервера и добавлять их к диаграмме с помощью метода series.addPoint. Также, если вы хотите использовать XML, просто преобразуйте его в объект JSON/JSON.

const randomData =() => [...Array(12)] 
    .map((u, i) => [new Date().getTime() + i * 1000, Math.random()]) 

Highcharts.chart('container', { 
    chart: { 
    renderTo: 'container', 
    type: 'spline', 
    backgroundColor: null, 
    animation: Highcharts.svg, // don't animate in old IE 
    marginRight: 10, 
    events: { 
     load() { 
     const chart = this 
     setInterval(() => { 
      // Fetch example below (working example: https://github.com/stpoa/live-btc-chart/blob/master/app.js) 
      // window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => { 
      // return response.json() 
      // }).then((data) => { 
      // chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) }) 
      // }) 

      chart.series.forEach((series) => series.addPoint([new Date().getTime(), Math.random()], true, true)) 

     }, 3000) 
     } 
    } 
    }, 
    title: { 
    text: null 
    }, 
    xAxis: { 
    type: 'datetime', 
    tickPixelInterval: 150 
    }, 
    yAxis: [{ 
    title: { 
     text: 'Temperature [°C]', 
      margin: 30 
    }, 
    plotLines: [{ 
     value: 0, 
     width: 1, 
     color: '#808080' 
    }] 
    }, { 

    }], 
    tooltip: { 
    formatter: function() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 4); 
    } 
    }, 
    legend: { 
    enabled: true 
    }, 
    exporting: { 
    enabled: false 
    }, 
    rangeSelector: { 
    enabled: false 
    }, 

    navigator: { 
    enabled: false 
    }, 
    scrollbar: { 
    enabled: false 
    }, 

    series: [{ 
    name: 'Setpoint', 
    data: randomData() 
    }, { 
    name: 'Return', 
    data: randomData() 
    }, { 
    name: 'Supply', 
    data: randomData() 
    }, { 
    name: 'Output', 
    data: randomData() 
    }] 
}) 

Живой пример: https://jsfiddle.net/9gw4ttnt/

Работа с одним внешним источником данных: https://jsfiddle.net/111u7nxs/