Fatal编程技术网
  • reactjs/
  • Reactjs React DOM:无法从'；轻量级图表'；身体

Reactjs React DOM:无法从'；轻量级图表'；身体

reactjs

Reactjs React DOM:无法从'；轻量级图表'；身体,reactjs,react-hooks,react-dom,tradingview-api,lightweight-charts,Reactjs,React Hooks,React Dom,Tradingview Api,Lightweight Charts,react的交易视图附带document.body，我想在父div中插入画布。但它会附加到body的末尾。尝试了很多可能的解决方案，但都没有奏效 图形代码如下所示： import { createChart } from "lightweight-charts"; function Graph() { var chart = createChart(document.body, { width: 600, height: 300,

react的交易视图附带document.body，我想在父div中插入画布。但它会附加到body的末尾。尝试了很多可能的解决方案，但都没有奏效

图形代码如下所示：

import { createChart } from "lightweight-charts";  

function Graph() {
      var chart = createChart(document.body, {
        width: 600,
        height: 300,
        crosshair: {
          mode: "normal"
        }
      });

      var candleSeries = chart.addCandlestickSeries();

      var data = [
        { time: "2018-10-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
        { time: "2018-10-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
        { time: "2018-10-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
        { time: "2018-10-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
        { time: "2018-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
        { time: "2018-10-26", open: 56.26, high: 56.62, low: 55.19, close: 55.51 },
        { time: "2018-10-29", open: 55.81, high: 57.15, low: 55.72, close: 56.48 },
        { time: "2018-10-30", open: 56.92, high: 58.8, low: 56.92, close: 58.18 },
        { time: "2018-10-31", open: 58.32, high: 58.32, low: 56.76, close: 57.09 },
        { time: "2018-11-01", open: 56.98, high: 57.28, low: 55.55, close: 56.05 },
        { time: "2018-11-02", open: 56.34, high: 57.08, low: 55.92, close: 56.63 },
        { time: "2018-11-05", open: 56.51, high: 57.45, low: 56.51, close: 57.21 },
        { time: "2018-11-06", open: 57.02, high: 57.35, low: 56.65, close: 57.21 },
        { time: "2018-11-07", open: 57.55, high: 57.78, low: 57.03, close: 57.65 },
        { time: "2018-11-08", open: 57.7, high: 58.44, low: 57.66, close: 58.27 },
      ];

      candleSeries.setData(data);

      var lastClose = data[data.length - 1].close;
      var lastIndex = data.length - 1;

      var targetIndex = lastIndex + 105 + Math.round(Math.random() + 30);
      var targetPrice = getRandomPrice();

      var currentIndex = lastIndex + 1;
      var currentBusinessDay = { day: 29, month: 5, year: 2019 };
      var ticksInCurrentBar = 0;
      var currentBar = {
        open: null,
        high: null,
        low: null,
        close: null,
        time: currentBusinessDay
      };

    function mergeTickToBar(price) {
        if (currentBar.open === null) {
          currentBar.open = price;
          currentBar.high = price;
          currentBar.low = price;
          currentBar.close = price;
        } else {
          currentBar.close = price;
          currentBar.high = Math.max(currentBar.high, price);
          currentBar.low = Math.min(currentBar.low, price);
        }
        candleSeries.update(currentBar);
      }

      function reset() {
        candleSeries.setData(data);
        lastClose = data[data.length - 1].close;
        lastIndex = data.length - 1;

        targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
        targetPrice = getRandomPrice();

        currentIndex = lastIndex + 1;
        currentBusinessDay = { day: 29, month: 5, year: 2019 };
        ticksInCurrentBar = 0;
      }

      function getRandomPrice() {
        return 10 + Math.round(Math.random() * 10000) / 100;
      }

      function nextBusinessDay(time) {
        var d = new Date();
        d.setUTCFullYear(time.year);
        d.setUTCMonth(time.month - 1);
        d.setUTCDate(time.day + 1);
        d.setUTCHours(0, 0, 0, 0);
        return {
          year: d.getUTCFullYear(),
          month: d.getUTCMonth() + 1,
          day: d.getUTCDate()
        };
      }

      setInterval(function() {
        var deltaY = targetPrice - lastClose;
        var deltaX = targetIndex - lastIndex;
        var angle = deltaY / deltaX;
        var basePrice = lastClose + (currentIndex - lastIndex) * angle;
        var noise = 0.1 - Math.random() * 0.2 + 1.0;
        var noisedPrice = basePrice * noise;
        mergeTickToBar(noisedPrice);
        if (++ticksInCurrentBar === 5) {
          // move to next bar
          currentIndex++;
          currentBusinessDay = nextBusinessDay(currentBusinessDay);
          currentBar = {
            open: null,
            high: null,
            low: null,
            close: null,
            time: currentBusinessDay
          };
          ticksInCurrentBar = 0;
          if (currentIndex === 5000) {
            reset();
            return;
          }
          if (currentIndex === targetIndex) {
            // change trend
            lastClose = noisedPrice;
            lastIndex = currentIndex;
            targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
            targetPrice = getRandomPrice();
          }
        }
      }, 200);
      return null;
    }

    export default Graph;
父组件：

import React from "react";
import Graph from "./Graph";

function App() {
  return (
    <div
      style={{
        flex: 1,
        flexDirection: "column",
        background: "orange",
        justifyContent: "center",
        alignItems: "center"
      }}
    >
      <Graph />
      <h1>It is to append graph into body</h1>
    </div>
  );
}

export default App;

从“React”导入React；
从“/Graph”导入图形；
函数App（）{
返回(
它是将图形附加到主体中
);
}
导出默认应用程序；
我尝试过REF，不同的DOM操作方法，但都不起作用。如果有人能帮我找到解决方案，那就太好了。

我使用的useRef逻辑错误，并且对这些更改进行了处理，对于可能遇到类似问题的人来说：

import { createChart } from "lightweight-charts";
import React from 'react';

const  Graph = () => {
  const chartRef = React.useRef(null);

  React.useEffect(()=> {
    if(chartRef.current){
      const chart = createChart(chartRef.current, {
        width: 600,
        height: 300,
        crosshair: {
          mode: "normal"
        }
      });

      prepareChart(chart);
    }
  }, [])

  function prepareChart(chart) {

  var candleSeries = chart.addCandlestickSeries();

  var data = [
    { time: "2018-10-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
    { time: "2018-10-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
    { time: "2018-10-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
    { time: "2018-10-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
    { time: "2018-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
  ];

  candleSeries.setData(data);

  var lastClose = data[data.length - 1].close;
  var lastIndex = data.length - 1;

  var targetIndex = lastIndex + 105 + Math.round(Math.random() + 30);
  var targetPrice = getRandomPrice();

  var currentIndex = lastIndex + 1;
  var currentBusinessDay = { day: 29, month: 5, year: 2019 };
  var ticksInCurrentBar = 0;
  var currentBar = {
    open: null,
    high: null,
    low: null,
    close: null,
    time: currentBusinessDay
  };

  function mergeTickToBar(price) {
    if (currentBar.open === null) {
      currentBar.open = price;
      currentBar.high = price;
      currentBar.low = price;
      currentBar.close = price;
    } else {
      currentBar.close = price;
      currentBar.high = Math.max(currentBar.high, price);
      currentBar.low = Math.min(currentBar.low, price);
    }
    candleSeries.update(currentBar);
  }

  function reset() {
    candleSeries.setData(data);
    lastClose = data[data.length - 1].close;
    lastIndex = data.length - 1;

    targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
    targetPrice = getRandomPrice();

    currentIndex = lastIndex + 1;
    currentBusinessDay = { day: 29, month: 5, year: 2019 };
    ticksInCurrentBar = 0;
  }

  function getRandomPrice() {
    return 10 + Math.round(Math.random() * 10000) / 100;
  }

  function nextBusinessDay(time) {
    var d = new Date();
    d.setUTCFullYear(time.year);
    d.setUTCMonth(time.month - 1);
    d.setUTCDate(time.day + 1);
    d.setUTCHours(0, 0, 0, 0);
    return {
      year: d.getUTCFullYear(),
      month: d.getUTCMonth() + 1,
      day: d.getUTCDate()
    };
  }

  setInterval(function() {
    var deltaY = targetPrice - lastClose;
    var deltaX = targetIndex - lastIndex;
    var angle = deltaY / deltaX;
    var basePrice = lastClose + (currentIndex - lastIndex) * angle;
    var noise = 0.1 - Math.random() * 0.2 + 1.0;
    var noisedPrice = basePrice * noise;
    mergeTickToBar(noisedPrice);
    if (++ticksInCurrentBar === 5) {
      // move to next bar
      currentIndex++;
      currentBusinessDay = nextBusinessDay(currentBusinessDay);
      currentBar = {
        open: null,
        high: null,
        low: null,
        close: null,
        time: currentBusinessDay
      };
      ticksInCurrentBar = 0;
      if (currentIndex === 5000) {
        reset();
        return;
      }
      if (currentIndex === targetIndex) {
        // change trend
        lastClose = noisedPrice;
        lastIndex = currentIndex;
        targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
        targetPrice = getRandomPrice();
      }
    }
  }, 200);

}
  return <div ref={chartRef} />;
}

export default Graph;

从“轻量级图表”导入{createChart}；
从“React”导入React；
常量图=（）=>{
const chartRef=React.useRef（null）；
React.useffect（（）=>{
如果（当前图表参考）{
常量图表=createChart（当前图表参考{
宽度：600，
身高：300，
十字线：{
模式：“正常”
}
});
准备（图表）；
}
}, [])
功能准备部分（图表）{
var candleSeries=chart.addCandlestickSeries（）；
风险值数据=[
{时间：“2018-10-19”，开盘价：54.62，高点：55.5，低点：54.52，收盘价：54.9}，
{时间：“2018-10-22”，开盘价：55.08，高点：55.27，低点：54.61，收盘价：54.98}，
{时间：“2018-10-23”，开盘：56.09，高点：57.47，低点：56.09，收盘：57.21}，
{时间：“2018-10-24”，开盘：57.0，高点：58.44，低点：56.41，收盘：57.42}，
{时间：“2018-10-25”，开盘：57.46，高点：57.63，低点：56.17，收盘：56.43}，
];
烛台系列.设置数据（数据）；
var lastClose=data[data.length-1].close；
var lastIndex=data.length-1；
var targetIndex=lastIndex+105+Math.round（Math.random（）+30）；
var targetPrice=getRandomPrice（）；
var currentIndex=lastIndex+1；
var currentBusinessDay={日期：29，月份：5，年份：2019}；
var ticksInCurrentBar=0；
var currentBar={
打开：空，
高：空，
低：空，
关闭：空，
时间：当前工作日
};
功能合并器（价格）{
如果（currentBar.open==null）{
currentBar.open=价格；
currentBar.high=价格；
currentBar.low=价格；
currentBar.close=价格；
}否则{
currentBar.close=价格；
currentBar.high=数学最大值（currentBar.high，价格）；
currentBar.low=数学最小值（currentBar.low，价格）；
}
candleSeries.update（currentBar）；
}
函数重置（）{
烛台系列.设置数据（数据）；
lastClose=data[data.length-1]。关闭；
lastIndex=data.length-1；
targetIndex=lastIndex+5+Math.round（Math.random（）+30）；
targetPrice=getRandomPrice（）；
currentIndex=lastIndex+1；
currentBusinessDay={日期：29，月份：5，年份：2019}；
ticksInCurrentBar=0；
}
函数getRandomPrice（）{
返回10+Math.round（Math.random（）*10000）/100；
}
功能下一工作日（时间）{
var d=新日期（）；
d、 setUTCFullYear（time.year）；
d、 setUTCMonth（time.month-1）；
d、 设定日期（time.day+1）；
d、 刚毛（0,0,0,0）；
返回{
年份：d.getUTCFullYear（），
月份：d.getUTCMonth（）+1，
日期：d.getUTCDate（）
};
}
setInterval（函数（）{
var deltaY=目标价格-最后关闭；
var deltaX=targetIndex-lastIndex；
var角度=三角洲/三角洲；
var basePrice=lastClose+（currentIndex-lastIndex）*角度；
var noise=0.1-Math.random（）*0.2+1.0；
var noisedPrice=基准价格*噪音；
合并成本（噪音价格）；
如果（++勾选当前条===5）{
//移动到下一个酒吧
currentIndex++；
currentBusinessDay=下一个营业日（currentBusinessDay）；
电流棒={
打开：空，
高：空，
低：空，
关闭：空，
时间：当前工作日
};
ticksInCurrentBar=0；
如果（当前索引===5000）{
重置（）；
返回；
}
如果（currentIndex==targetIndex）{
//变化趋势
lastClose=噪音价格；
lastIndex=当前索引；
targetIndex=lastIndex+5+Math.round（Math.random（）+30）；
targetPrice=getRandomPrice（）；
}
}
}, 200);
}
返回；
}
导出默认图形；
Graph组件没有返回任何可追加的html…您是想返回Graph内部的
chart
吗？@Tolumide trading view返回它自己的画布。我想将画布附加到我无法完成的部分。如果您还没有找到解决方案，而不是在图形上使用document.body，您可以尝试选择一个类吗？创建一个包含Graph中的类的div，然后返回Graph中的div……这样您就有了类似document.createChart（document.querySelector（'.className'）…）的内容。在图形中，在所有操作之后返回。“让我知道这是否有效？”托鲁米德我试过这个，但没有成功。但是现在有了“useRef”，不知何故，我让它工作起来了。在JS框架之外使用javascript，你知道如何解决这个错误吗？->未捕获错误：无法更新最旧的数据，上次时间=1612148400，新时间=1612137600