0

美好的一天，我决定使用一个呈现简单轻量级图表的库，有一个代码示例说明如何使用它：

<script>
    var chart = LightweightCharts.createChart(document.body, {
        width: 600,
        height: 300,
        layout: {
            backgroundColor: '#000000',
            textColor: 'rgba(255, 255, 255, 0.9)',
        },
        grid: {
            vertLines: {
                color: 'rgba(197, 203, 206, 0.5)',
            },
            horzLines: {
                color: 'rgba(197, 203, 206, 0.5)',
            },
        },
        crosshair: {
            mode: LightweightCharts.CrosshairMode.Normal,
        },
        rightPriceScale: {
            borderColor: 'rgba(197, 203, 206, 0.8)',
        },
        timeScale: {
            borderColor: 'rgba(197, 203, 206, 0.8)',
        },
    });
    
    var candleSeries = chart.addCandlestickSeries({
      upColor: 'rgba(255, 144, 0, 1)',
      downColor: '#000',
      borderDownColor: 'rgba(255, 144, 0, 1)',
      borderUpColor: 'rgba(255, 144, 0, 1)',
      wickDownColor: 'rgba(255, 144, 0, 1)',
      wickUpColor: 'rgba(255, 144, 0, 1)',
    });
    
    candleSeries.setData([
        { time: '2019-05-20', open: 191.13, high: 192.86, low: 190.61, close: 190.95 },
        { time: '2019-05-21', open: 187.13, high: 192.52, low: 186.34, close: 191.45 },
        { time: '2019-05-22', open: 190.49, high: 192.22, low: 188.05, close: 188.91 },
        { time: '2019-05-23', open: 188.45, high: 192.54, low: 186.27, close: 192.00 },
        { time: '2019-05-24', open: 192.54, high: 193.86, low: 190.41, close: 193.59 },
    ]);      
  </script>

我需要定期更新此图表，文档中有这样的方法：

// update the most recent bar
candlestickSeries.update({ time: '2018-12-31', open: 109.87, high: 114.69, low: 85.66, close: 112 });

// creating the new bar
candlestickSeries.update({ time: '2019-01-01', open: 112, high: 112, low: 100, close: 101 });

实际上问题本身，我如何在技术上更新这些数据？我在最初学者的水平上了解 JavaScript，我不明白它是如何工作的，我如何动态添加这个方法。或者这里有必要使用 websocket 吗？没有它你能行吗？请解释它是如何工作的以及如何正确地做。谢谢你。

4

1 回答 1

0

如果使用 React，您可以使用一个钩子，该钩子会在选择时使用例如useEffect更新您的图表。setInterval

于 2022-02-16T13:15:02.500 回答