Javascript 如何在海图上使用动态数据？

我从我的页面上的websocket连接接收数据，我想在Highcharts深度图表上绘制该数据

深度图：

这是我的密码：

<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>

---

您可以使用

map

函数获取每个

系列

数据，如下所示

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

风险值数据=[
[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]）//图表上要使用的数据
const bids=data.map（x=>x[1]）//图表上要使用的数据
Highcharts.chart（'容器'{
图表：{
类型：'区域'，
zoomType:'xy'
},
标题：{
正文：“ETH-BTC市场深度”
},
xAxis：{
数字：0，
maxPadding:0，
},
亚克斯：[{
线宽：1，
网格线宽度：1，
标题：空，
宽度：1，
长度：5，
位置：'内部'，
标签：{
对齐：“左”，
x:8
}
}, {
相反：是的，
链接到：0，
线宽：1，
网格线宽：0，
标题：空，
宽度：1，
长度：5，
位置：'内部'，
标签：{
对齐：“右”，
x:-8
}
}],
图例：{
已启用：false
},
打印选项：{
面积：{
填充不透明度：0.2，
线宽：1，
步骤：“中心”
}
},
工具提示：{
headerFormat:'Price:{point.key}
，
数值小数：2
},
系列：[{
名称：'投标'，
数据：bids，//数据在这里
颜色：“#03a7a8”
}, {
姓名：'问'，
data:asks，//数据来了
颜色：“#fc5857”
}]
}); 

您可以使用

映射

功能获取每个

系列

数据，如下所示

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

风险值数据=[
[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]）//图表上要使用的数据
const bids=data.map（x=>x[1]）//图表上要使用的数据
Highcharts.chart（'容器'{
图表：{
类型：'区域'，
zoomType:'xy'
},
标题：{
正文：“ETH-BTC市场深度”
},
xAxis：{
数字：0，
maxPadding:0，
},
亚克斯：[{
线宽：1，
网格线宽度：1，
标题：空，
宽度：1，
长度：5，
位置：'内部'，
标签：{
对齐：“左”，
x:8
}
}, {
相反：是的，
链接到：0，
线宽：1，
网格线宽：0，
标题：空，
宽度：1，
长度：5，
位置：'内部'，
标签：{
对齐：“右”，
x:-8
}
}],
图例：{
已启用：false
},
打印选项：{
面积：{
填充不透明度：0.2，
线宽：1，
步骤：“中心”
}
},
工具提示：{
headerFormat:'Price:{point.key}
，
数值小数：2
},
系列：[{
名称：'投标'，
数据：bids，//数据在这里
颜色：“#03a7a8”
}, {
姓名：'问'，
data:asks，//数据来了
颜色：“#fc5857”
}]
}); 

我准备了一个示例，其中图表使用空数据呈现，并且每隔一秒钟更新一次数据（模拟从WebSocket获取数据）

演示：

---

API:

我准备了一个示例，其中图表使用空数据呈现，并且每隔一秒钟更新一次数据（模拟从WebSocket获取数据）

演示：

---

API:

此处的类似答案详细说明了套接字收到消息时如何添加数据点：此处的类似答案详细说明了套接字收到消息时如何添加数据点：谢谢您的回答！有一件事我不明白：websocket连接的代码在哪里？由于数据是从那里检索到的，谢谢您的回答！有一件事我不明白：websocket连接的代码在哪里？由于数据是从那里检索到的，谢谢您的回答！我看了你的例子，很清楚；我不完全理解的是：如何将其集成到自己的代码中？你能帮我一点忙吗？好的，我想我做到了！有一件事很棘手：我认为当新数据到达时它不会更新，为了做到这一点，我需要向它添加什么？我不知道你是如何从服务器请求数据的-我是说你如何刷新数据，可以在线复制数据？当然！让我解释一下：在我的问题上，你看到sampleData数组了吗？我每秒钟都会收到一个这样的数组，当然数据不同。因此，每秒钟我都会收到两个数组：一个用于出价，另一个用于请求！尝试以下操作：当新阵列准备就绪时-使用新数据更新

chart.series

。谢谢您的回答！我看了你的例子，很清楚；我不完全理解的是：如何将其集成到自己的代码中？你能帮我一点忙吗？好的，我想我做到了！有一件事很棘手：我认为当新数据到达时它不会更新，为了做到这一点，我需要向它添加什么？我不知道您是如何从服务器请求数据的-我是说您是如何刷新数据的

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

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