reactjs - 轻量级图表反应
问题描述
我需要 React Lightweight 图表方面的帮助,目前我在我的项目中使用 3 种类型的图表,即区域、蜡烛、条形图。我们在前端有按钮可以在它们之间切换。因此,从蜡烛切换到区域和 Vica Versa 工作正常,但是当从蜡烛切换到条形图时,它没有在图表中显示条形系列,即使我已经移除了蜡烛系列,它也在显示蜡烛系列。
当我在条形系列中设置静态数据时,它工作正常,但当我设置动态数据时,它显示蜡烛系列而不是条形系列。我不知道问题是什么,任何人都可以请帮助我我也可以分享一个代码片段
const { symbol, interval, range, height, width, name, chartOptions } = props;
const [data, setData] = useState();
const [chart, setChart] = useState();
const [chartDimensions, setChartDimensions] = useState({ height, width });
const [series, setSeries] = useState({ candlestick: null, volume: null });
const [areaSeriesState, setAreaSeries] = useState({ areastick: null });
const [barSeriesState, setBarSeries] = useState({ barstick: null });
useEffect(() => {
if (data !== undefined) {
if (series.candlestick !== null && chart.volume !== null) {
chart.removeSeries(series.candlestick);
chart.removeSeries(series.volume);
}
if (areaSeriesState.areastick !== null) {
chart.removeSeries(areaSeriesState.areastick);
}
if (barSeriesState.barstick !== null) {
chart.removeSeries(barSeriesState.barstick);
}
if (chartOptions.area) {
if (series.candlestick !== null && chart.volume !== null) {
setSeries({ candlestick: null, volume: null });
}
if (barSeriesState.barstick !== null) {
setBarSeries({ barstick: null });
}
_.map(data, (candleData) => {
areaData.push({
time: candleData.time,
value: candleData.close
});
});
const areaSeries = chart.addAreaSeries({
lineColor: "#66b5bd"
});
setAreaSeries({ areastick: areaSeries });
// set the data
areaSeries.setData(areaData);
} else if (chartOptions.bar) {
if (series.candlestick !== null && chart.volume !== null) {
setSeries({ candlestick: null, volume: null });
}
if (areaSeriesState.areastick !== null) {
setAreaSeries({ areastick: null });
}
_.map(data, (bar) => {
barData.push({
time: bar.time,
open: bar.open,
high: bar.high,
low: bar.low,
close: bar.low
});
return barData;
});
const barSeries = chart.addBarSeries({
thinBars: false
});
setBarSeries({ barstick: barSeries });
barSeries.setData(barData);
} else {
if (areaSeriesState.areastick !== null) {
setAreaSeries({ areastick: null });
}
if (barSeriesState.barstick !== null) {
setBarSeries({ barstick: null });
}
const volumeSeries = chart.addHistogramSeries({
priceFormat: {
type: "volume"
},
overlay: true,
scaleMargins: {
top: 0.7,
bottom: 0
}
});
// console.log("data before use is", data);
volumeSeries.setData(
data.map(({ time, volume, open, close }) => ({
time,
value: volume,
color:
close >= open ? "rgba(38,166,154,0.4)" : "rgba(239,83,80,0.4)"
}))
);
const candlestickSeries = chart.addCandlestickSeries();
candlestickSeries.setData(data);
setSeries({ candlestick: candlestickSeries, volume: volumeSeries });
}
chart.timeScale().fitContent();
}
},[data, chart, chartOptions.area, chartOptions.candles,chartOptions.bar]);
解决方案
推荐阅读
- java - 从数据库中读取 java.sql.Date 的 TimeZone 时,如何考虑它?
- c - 为 GTK 2.24 和 GTK 3 和 GTK 4 创建菜单栏
- rsync - 处理删除时双向同步
- django - 根据某些用户信息过滤 query_set 的最安全和最干燥的方法
- html - 使用按钮定位表单
- math - 使用二进制补码与二进制减法作斗争
- python - 如何在 Plotly Dash 应用程序中水平放置图形?
- python - 为什么 Python 垃圾收集器似乎不适用于 AWSIotMQTTClient 实例?
- json - 绑定 JSON 以在 AngularJs 中为一对多关系构建动态表单,并在两个表中都有父子关系
- php - 发送 PHP 变量 - setInterval 只工作一次