Как синхронизировать одну линию LTP в нескольких графиках? ⇐ Javascript

[Anonymous]

Что я попробовал < /strong>
• ltp y из легких диаграмм: < /p>

• Updateltplineposition () → Candleseriesref.current.pricetocoordinate (currentPrice) < /li>
  РЕЗУЛЬТАТ. этот пиксель (см. наложение JSX).
  • LTP x выровнен с последней панелью: < /li>
  drawltpline () → timesscale.timetocoordinate (ltptimestr).
  • Сопоставьте высокие чашки y-range со свечей: < /li>
  match High Charts с кальчами: < /li>
  /> volumeprofileref.current.chart.yaxis®.setextremes(min, max, true, false) < /li>
  То же самое для GammaproFileref.
  uncuct on < /strong>
  mappenpric Диаграммы, поэтому пунктирная линия находится на точном уровне цен на всех трех графиках. Я думаю, что я должен использовать:
  const y = chart.yAxis[0].toPixels(currentPrice, true) (с Reversed: true ), но я не уверен, потому что Yaxis использует категории (удары). Как правильный способ преобразовать цену/удар в пиксели и синхронизировать ее?

useEffect(() => {
if (!candleRef.current) return;

const candleChart = createChart(candleRef.current, {
layout: { background: { color: '#181A20' }, textColor: '#fff' },
grid: { vertLines: { color: '#2a2e39' }, horzLines: { color: '#2a2e39' } },
width: candleRef.current.clientWidth,
height: 400,
timeScale: { timeVisible: true, secondsVisible: false },
rightPriceScale: { borderColor: '#2a2e39' },
});

const series = candleChart.addCandlestickSeries({
upColor: "#26a69a", downColor: "#ef5350", borderVisible: false,
wickUpColor: "#26a69a", wickDownColor: "#ef5350",
});
series.setData(candlestickData);
candleSeriesRef.current = series;

// === ATTEMPT: Creating LTP line series on candlestick chart ===
const ltpLine = candleChart.addLineSeries({
color: 'transparent', lineWidth: 2, lineStyle: LineStyle.Dashed,
crosshairMarkerVisible: true, crosshairMarkerRadius: 6,
crosshairMarkerBorderColor: 'transparent', crosshairMarkerBackgroundColor: 'transparent',
});
const ltpData = candlestickData.map(item => ({ time: item.time, value: currentPrice }));
ltpLine.setData(ltpData);
// === /ATTEMPT ===

const timeScale = candleChart.timeScale();
const priceScale = candleChart.priceScale('right');

// === ATTEMPT: Aligning LTP X position with last bar time ===
const drawLtpLine = () => {
const x = timeScale.timeToCoordinate(ltpTimeStr as unknown as Time);
if (x == null || !ltpLineRef.current) return;
ltpLineRef.current.style.left = `${Math.round(x)}px`;
};
// === /ATTEMPT ===

const onVisibleLogicalRangeChange = () => {
const logicalRange = timeScale.getVisibleLogicalRange();
if (logicalRange) {
}
updateLtpLinePosition();
};

// === ATTEMPT: Getting LTP Y coordinate for dashed overlay ===
const updateLtpLinePosition = () => {
if (candleSeriesRef.current) {
const y = candleSeriesRef.current.priceToCoordinate(currentPrice);
setLtpLineY(y);
}
};
// === /ATTEMPT ===

setTimeout(drawLtpLine, 0);
timeScale.subscribeVisibleTimeRangeChange(drawLtpLine);
timeScale.subscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChange);

const ro = new ResizeObserver(() => {
drawLtpLine();
updateLtpLinePosition();
});

return () => {
timeScale.unsubscribeVisibleTimeRangeChange(drawLtpLine);
timeScale.unsubscribeVisibleLogicalRangeChange(onVisibleLogicalRangeChange);
ro.disconnect();
candleChart.remove();
};
}, [ltpTimeStr, currentPrice]);

// === ATTEMPT: Syncing Highcharts y-axis extremes with candlestick chart ===
useEffect(() => {
if (volumeProfileRef.current?.chart) {
const chart = volumeProfileRef.current.chart;
chart.yAxis[0].setExtremes(visiblePriceRange.min, visiblePriceRange.max, true, false);
}
if (gammaProfileRef.current?.chart) {
const chart = gammaProfileRef.current.chart;
chart.yAxis[0].setExtremes(visiblePriceRange.min, visiblePriceRange.max, true, false);
}
}, [visiblePriceRange]);
// === /ATTEMPT ===



Подробнее здесь: https://stackoverflow.com/questions/797 ... ple-charts