如何在流线图js中渲染coinbase API

Question

问题：我正在尝试在 ChartJS 中渲染 level2 api。但做不到

我将数据保留在 2 个变量出价、询问并尝试根据时间绘制它们。

代码沙箱 https://codesandbox.io/p/sandbox/dazzling-neumann-qjw7yv

API：https://docs.cdp.coinbase.com/exchange/docs/websocket-channels/#level2-channel

代码

    options={{
        scales: {
          x: {
            type: "realtime",
            realtime: {
              onRefresh: (chart) => {
                bids.forEach((bid) => {
                  chart.data.datasets[0].data.push({
                    x: bid.time,
                    y: bid.price,
                  });
                });

                asks.forEach((ask) => {
                  chart.data.datasets[1].data.push({
                    x: ask.time,
                    y: ask.price,
                  });
                });
              },
            },
          },
        },
      }}

• 查看简化数据的选项 （https://nagix.github.io/chartjs-plugin-streaming/master/guide/data-feed-models.html#pull-model-polling-based-synchronous）。
• ask 和 bids 是从 Web 套接字连接接收到的数据 （https://docs.cdp.coinbase.com/exchange/docs/websocket-overview/）

Answer 1

花了一点时间之后，这就是我设法做到的。

首先，您创建一个表，该表将通过 useEffect 填充每个新的出价或要价。

const { bids, asks } = useWebSocket();
  const [chartData, setChartData] = useState({ datasets: [] });

  const [newBid, setnewBid] = useState([]);
  const [newAsk, setnewAsk] = useState([]);

  useEffect(() => {
    bids.map((bid) => {
      setnewBid([...newBid, { x: bid.time, y: bid.price }]);
    });
  }, [bids]);

  useEffect(() => {
    asks.map((ask) => {
      setnewAsk([...newAsk, { x: ask.time, y: ask.price }]);
    });
  }, [asks]);

其次，你定义你的选择。

const options = {
    scales: {
      y: {
        display: true,
        type: "linear",
        position: "left",
        suggestedMin: 0.245,
        suggestedMax: 0.26,
      },

      x: {
        display: true,
        type: "realtime",
      },
    },
  };

第三，定义数据集。

const datasets = {
    datasets: [
      {
        label: "Bids",
        backgroundColor: "rgba(255, 99, 132, 0.5)",
        borderColor: "rgb(255, 99, 132)",
        fill: true,
        data: newBid,
        yAxisID: "y",
        xAxisID: "x",
      },
      {
        label: "Asks",
        backgroundColor: "rgba(54, 162, 235, 0.5)",
        borderColor: "rgb(54, 162, 235)",
        cubicInterpolationMode: "monotone",
        fill: true,
        data: newAsk,
      },
    ],
  };

最后将所有内容导入图表中。

return <Line data={datasets} options={options} />;

多亏了这段代码，这两行才可以正确显示，而且随着时间的推移，轴不会做出奇怪的反应。曲线不一定很漂亮，但是是后期调整看的。

竭诚为您服务！