Данные свечей AnyChart исчезают при определенном увеличении ⇐ Html

[Anonymous]

У меня возникла проблема с использованием Anychart при загрузке больших объемов данных в график акций (свечей) и применении масштабирования.
Я использую Rails с контроллером стимулов, и график рисуется в контроллере стимулов.
Например, при загрузке ~60 часов данных m1 график загружается, не показывая никаких данных, однако, если я расширяю и сжимаю увеличенную область графика, данные внезапно появляются и исчезает.
Я загрузил видео, показывающее проблему: https://imgur.com/a/4cdtrcD
код, отвечающий за рисование диаграммы:
const chart = anychart.stock();
chart.background().fill("#131821");
var table = anychart.data.table();
var plot = chart.plot(0);

this.chart = chart;
this.plot = plot;

plot.legend().enabled(false);

table.addData(parsedJsonData.chart_data);
var mapping = table.mapAs();

mapping.addField('open', 1);
mapping.addField('high', 2);
mapping.addField('low', 3);
mapping.addField('close', 4);
mapping.addField('volume', 5);

plot.candlestick(mapping);

plot.yGrid().enabled(true);
plot.yGrid().stroke({
color: "rgba(255,255,255,0.125)",
thickness: 1,
dash: "3 5"
});
plot.xGrid().enabled(true);
plot.xGrid().stroke({
color: "rgba(255,255,255,0.125)",
thickness: 1,
dash: "3 5"
});

// Minor grid lines
plot.yMinorGrid().enabled(true);
plot.yMinorGrid().stroke({
color: "rgba(255,255,255,0.095)",
thickness: 1,
dash: "1 3"
});
plot.xMinorGrid().enabled(true);
plot.xMinorGrid().stroke({
color: "rgba(255,255,255,0.095)",
thickness: 1,
dash: "1 3"
});

chart.selectRange(parsedJsonData.zoom_start, parsedJsonData.zoom_end);

chart.contextMenu().itemsFormatter(function(items) {
delete items["save-data-as"];
return items;
});

chart.title().fontColor("#000000").fontSize(16).fontFamily("Arial, sans-serif");

document.querySelector(`#chart-container-${this.orderIdValue}`).innerHTML = '';

chart.container(`chart-container-${this.orderIdValue}`);

chart.draw();

Мне посоветовали предоставить минимальный пример для тестирования, однако мне не удалось это сделать и увидеть ту же проблему в одном HTML-файле. Я протестировал до 80 000 точек данных, используя приведенный ниже код, и все работает нормально, поэтому в моей конкретной реализации, использующей стимул с рельсами, должна быть какая-то проблема.





AnyChart Large Dataset Issue




body {
margin: 20px;
font-family: Arial, sans-serif;
background: #f0f0f0;
}
#chart-container {
width: 100%;
height: 600px;
background: #131821;
}
.info {
margin-bottom: 20px;
padding: 10px;
background: #e8f4f8;
border-left: 4px solid #2196F3;
}




Issue: Loading ~4800 M1 candles (80 hours). Chart shows no data initially, but data appears/disappears when zooming.


// Generate sample M1 data for 80 hours (4800 candles)
function generateSampleData() {
const data = [];
const startDate = new Date('2024-01-01T00:00:00Z');
let price = 1.2000;

for (let i = 0; i < 80000; i++) {
const timestamp = startDate.getTime() + (i * 60 * 1000); // 1 minute intervals

// Generate realistic price movement
const change = (Math.random() - 0.5) * 0.0020; // ±0.002 max change
price += change;

const open = Math.round(price * 10000) / 10000;
const close = Math.round((price + (Math.random() - 0.5) * 0.0010) * 10000) / 10000;
const high = Math.round((Math.max(open, close) + Math.random() * 0.0005) * 10000) / 10000;
const low = Math.round((Math.min(open, close) - Math.random() * 0.0005) * 10000) / 10000;
const volume = Math.floor(Math.random() * 1000) + 100;

data.push([timestamp, open, high, low, close, volume]);
price = close;
}

console.log('Sample data point:', data[0]);
console.log('Last data point:', data[data.length - 1]);
return data;
}

// Create the chart
function createChart() {
const chartData = generateSampleData();
console.log('Generated', chartData.length, 'data points');

const chart = anychart.stock();
chart.background().fill("#131821");

const table = anychart.data.table();
const plot = chart.plot(0);

plot.legend().enabled(false);

table.addData(chartData);
const mapping = table.mapAs();

mapping.addField('open', 1);
mapping.addField('high', 2);
mapping.addField('low', 3);
mapping.addField('close', 4);
mapping.addField('volume', 5);

plot.candlestick(mapping);

// Grid configuration
plot.yGrid().enabled(true);
plot.yGrid().stroke({
color: "rgba(255,255,255,0.125)",
thickness: 1,
dash: "3 5"
});
plot.xGrid().enabled(true);
plot.xGrid().stroke({
color: "rgba(255,255,255,0.125)",
thickness: 1,
dash: "3 5"
});

plot.yMinorGrid().enabled(true);
plot.yMinorGrid().stroke({
color: "rgba(255,255,255,0.095)",
thickness: 1,
dash: "1 3"
});
plot.xMinorGrid().enabled(true);
plot.xMinorGrid().stroke({
color: "rgba(255,255,255,0.095)",
thickness: 1,
dash: "1 3"
});

// Set zoom range to show full dataset initially
const firstTimestamp = chartData[0][0];
const lastTimestamp = chartData[chartData.length - 1][0];
chart.selectRange(firstTimestamp, lastTimestamp);

// Context menu removed for minimal example

chart.title().fontColor("#ffffff").fontSize(16).fontFamily("Arial, sans-serif");
chart.title("Large Dataset Issue - 3600 M1 Candles");

chart.container("chart-container");
chart.draw();
}

// Create the chart when page loads
anychart.onDocumentReady(createChart);






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