用于反应的交易视图带有 document.body ，我想在父 div 中插入画布。但它会附加到正文的末尾。尝试了很多可能的解决方案，但没有任何效果。
图形代码如下：
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;
我尝试过 refs，不同的 DOM 操作方法，但没有任何效果。如果有人可以帮助我找到解决方案，那就太好了。