ダイナミックな更新可能なマルチレベルシリーズシングルポイントのXMLファイルを使用したハイチャート

Question

私は通常アナリティクスを行いファンシーフロントエンドではないので、少し快適です。しかし、私は自分の仕事の一部をリアルタイムにデモしたいので、マトリックスの数字だけでなく、理解しやすくなります。私は周りを見回したと半関連の何かを発見し、ここまで来ている：

は（私がしたいようですが、4つのシリーズを持っており、それを反復する - ある程度） https://jsfiddle.net/023sre9r/

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

しかし、私は完全に失われていますビュー内のデータポイントの数のような素晴らしいものを失うことなく乱数ジェネレータを削除する方法について（forループに依存するようですか？）。私の実際のY軸タイトルのすぐ横に余分なタイトル「値」を削除します。また、毎秒XMLファイルから新しいデータポイントを取得する方法もあります。

理想的には、4つの値を含むXMLファイルが必要です。これは、MATLABで約200msごとに更新されます。そして、毎秒私の4シリーズチャートが更新されることを望みます。あなたがやっていることを知っているなら、それは比較的簡単ではありませんか？ :-)

ありがとうございます！

Answer 1

私は例を簡略化し、サーバーからデータをフェッチし、series.addPointメソッドを使用してグラフに追加する方法を示す明確なコードを追加しました。また、XMLを使用する場合は、JSオブジェクト/ 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/111u7nxs/

：外部データソースとの1の作業 https://jsfiddle.net/9gw4ttnt/