Как я могу использовать данные Dynami c на графике Highcharts?

Question

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

Графики глубины: https://www.highcharts.com/docs/stock/depth-chart

Вот мой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script language="javascript">
    mySocket.onmessage = function(event) {
        var data = JSON.parse(event.data);
        rawAsks = data['asks']
        rawBids = data['bids']

        const asks = rawasks.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART
        const bids = rawbids.map(x => x.map(y => parseFloat(y))) //DATA TO USE ON THE CHART

    };

    Highcharts.chart('container', {
      chart: {
        type: 'area',
        zoomType: 'xy'
      },
      title: {
        text: 'ETH-BTC Market Depth'
      },
      xAxis: {
        minPadding: 0,
        maxPadding: 0,

      },
      yAxis: [{
        lineWidth: 1,
        gridLineWidth: 1,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
          align: 'left',
          x: 8
        }
      }, {
        opposite: true,
        linkedTo: 0,
        lineWidth: 1,
        gridLineWidth: 0,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
          align: 'right',
          x: -8
        }
      }],
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillOpacity: 0.2,
          lineWidth: 1,
          step: 'center'
        }
      },
      tooltip: {
        headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
        valueDecimals: 2
      },
      series: [{
        name: 'Bids',
        data: Bids, //HERE GOES THE DATA
        color: '#03a7a8'
      }, {
        name: 'Asks',
        data: Asks, //HERE GOES THE DATA
        color: '#fc5857'
      }]
    });
</script>

Вот проблемы с моим графиком: 1) Данные для построения asks и bids. Проблема состоит в том, что эти две переменные обновляются каждую секунду из соединения через веб-сокет, поэтому они не являются значениями c. 2) Как я могу передать asks и bids на диаграмму Highcharts и как я могу обновлять sh диаграмму каждый раз, когда обновляются данные? Заранее спасибо!

Вот пример данных, которые я получаю каждую секунду и которые необходимо построить:

var sampleData = [
[7062.24, 0.402181],
[7062.56, 2.472812],
[7062.59, 0.006595],
[7063.01, 1.2001],
[7063.27, 0.4],
[7063.28, 0.100615],
[7063.48, 0.4],
[7063.76, 0.086983],
[7063.83, 0.005],
[7064.19, 0.399752],
[7064.2, 1.70819],
[7064.41, 0.25],
[7064.43, 0.015026],
]

Answer 1

Я подготовил пример, в котором диаграмма отображается с пустыми данными и обновляется каждые одну секунду (симуляция получения данных из WebSocket).

Демонстрация: https://jsfiddle.net/BlackLabel/zuhg390j/

events: {
  load() {
    let chart = this;
    setTimeout(function() {
      chart.series[0].update({
        data: dataBids
      }, false)

      chart.series[1].update({
        data: dataAsks
      })
    }, 1000)
  }
}

API: https://api.highcharts.com/class-reference/Highcharts.Series#update

Answer 2

Вы можете использовать функцию map для получения каждых series данных, как показано ниже

var data = [
        [7062.24, 0.402181],
        [7062.56, 2.472812],
        [7062.59, 0.006595],
        [7063.01, 1.2001],
        [7063.27, 0.4],
        [7063.28, 0.100615],
        [7063.48, 0.4],
        [7063.76, 0.086983],
        [7063.83, 0.005],
        [7064.19, 0.399752],
        [7064.2, 1.70819],
        [7064.41, 0.25],
        [7064.43, 0.015026],
    ];


const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART
const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<script src = "https://code.highcharts.com/highcharts.js"></script>

    <div id = "container"> </div> 
    <script language = "javascript">

    var data = [
        [7062.24, 0.402181],
        [7062.56, 2.472812],
        [7062.59, 0.006595],
        [7063.01, 1.2001],
        [7063.27, 0.4],
        [7063.28, 0.100615],
        [7063.48, 0.4],
        [7063.76, 0.086983],
        [7063.83, 0.005],
        [7064.19, 0.399752],
        [7064.2, 1.70819],
        [7064.41, 0.25],
        [7064.43, 0.015026],
    ];


const asks = data.map(x => x[0]); //DATA TO USE ON THE CHART
const bids = data.map(x => x[1]); //DATA TO USE ON THE CHART



Highcharts.chart('container', {
    chart: {
        type: 'area',
        zoomType: 'xy'
    },
    title: {
        text: 'ETH-BTC Market Depth'
    },
    xAxis: {
        minPadding: 0,
        maxPadding: 0,

    },
    yAxis: [{
        lineWidth: 1,
        gridLineWidth: 1,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
            align: 'left',
            x: 8
        }
    }, {
        opposite: true,
        linkedTo: 0,
        lineWidth: 1,
        gridLineWidth: 0,
        title: null,
        tickWidth: 1,
        tickLength: 5,
        tickPosition: 'inside',
        labels: {
            align: 'right',
            x: -8
        }
    }],
    legend: {
        enabled: false
    },
    plotOptions: {
        area: {
            fillOpacity: 0.2,
            lineWidth: 1,
            step: 'center'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size=10px;">Price: {point.key}</span><br/>',
        valueDecimals: 2
    },
    series: [{
        name: 'Bids',
        data: bids, //HERE GOES THE DATA
        color: '#03a7a8'
    }, {
        name: 'Asks',
        data: asks, //HERE GOES THE DATA
        color: '#fc5857'
    }]
}); 
</script>