Как обработать большой файл CSV с HTML, JS и Cart.js ⇐ Html

[Anonymous]

Я должен загрузить файл CSV 90 МБ, а затем проанализировать его с помощью chart.js в качестве диаграммы. Файл CSV имеет измеренные значения, которые записываются в минуту. Затем 90 МБ - это почти год данных. Я уже установил время ответа на веб -сайт на высокую ценность. Но мой код спускается по сливе. Вот почему я сделал только сделать и отображать только определенное количество значений данных, а затем щелкните диаграмму с интервалами. Даже это все еще очень медленно и не приятно. Для оценки, по крайней мере, ежемесячный обзор будет приятным. Но я понятия не имею, какие корректировки я все еще могу внести. У вас есть идеи? < /P>
html < /p>





CSV Diagramm mit Chart.js




Datei hier ablegen




Vorheriger Tag
Nächster Tag






< /code>
js < /p>
let startIndex = 0;
const displayCount = 1440;
let labels = [];
let datasets = [];
let originalDatasetVisibility = [];

function handleUpload() {
const fileInput = document.getElementById('csvFileInput');
const file = fileInput.files[0];
handleFile(file);
}

function processData(csvData) {
const rows = csvData.split('\n');
labels = [];
datasets = [];
originalDatasetVisibility = [];

const colors = ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)', 'rgba(255, 255, 0, 1)', 'rgba(0, 0, 255, 1)'];

const columns = rows[0].split(';');

for (let i = 1; i < columns.length; i++) {
const data = [];
const currentLabel = columns;
const color = colors;

for (let j = 1; j < rows.length; j++) {
const cols = rows[j].split(';');
if (i === 1) {
labels.push(cols[0]);
}
data.push(parseFloat(cols));
}

const dataset = {
label: currentLabel,
data: data,
backgroundColor: color,
borderColor: color,
fill: false,
borderWidth: 1,
pointRadius: 1,
};

datasets.push(dataset);
originalDatasetVisibility.push(true);
}

createChart(labels.slice(startIndex, startIndex + displayCount), datasets, function() {
console.log('Diagramm wurde erstellt');
});
}

function createChart(labels, datasets, callback) {
const chartContainer = document.querySelector('.chart-container');
const canvasElement = document.getElementById('myChart');

if (canvasElement) {
chartContainer.removeChild(canvasElement);
}

chartContainer.innerHTML = '';

const ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: datasets.map((dataset, index) => ({
...dataset,
data: dataset.data.slice(startIndex, startIndex + displayCount),
hidden: !originalDatasetVisibility[index],
})),
},
options: {
scales: {
x: {
stacked: true,
min: labels[startIndex],
max: labels[startIndex + displayCount - 1],
},
y: {},
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'x',
}
}
}
}
});

if (callback && typeof callback === 'function') {
callback();
}

window.myChart.resetZoom();
window.myChart.ctx.canvas.addEventListener('wheel', handleZoom);
}

function handleZoom(event) {
const chart = window.myChart;
const chartArea = chart.chartArea;
const originalDatasets = chart.data.datasets;

const zoomEnabled = chart.options.plugins.zoom.zoom.wheel.enabled;
const deltaY = event.deltaY;

if (zoomEnabled && deltaY !== 0) {
const deltaMode = event.deltaMode;
const scaleDelta = deltaY > 0 ? 0.9 : 1.1;

let newMinIndex = chart.getDatasetMeta(0).data.findIndex(
(d) => d.x >= chartArea.left
);
let newMaxIndex = chart.getDatasetMeta(0).data.findIndex(
(d) => d.x >= chartArea.right
);

if (deltaMode === 0) {
newMinIndex = Math.max(0, newMinIndex - Math.abs(deltaY));
newMaxIndex = Math.min(
originalDatasets[0].data.length - 1,
newMaxIndex + Math.abs(deltaY)
);
} else if (deltaMode === 1) {
newMinIndex = Math.max(0, newMinIndex - Math.abs(deltaY) * 10);
newMaxIndex = Math.min(
originalDatasets[0].data.length - 1,
newMaxIndex + Math.abs(deltaY) * 10
);
}

const newMinLabel = originalDatasets[0].data[newMinIndex].label;
const newMaxLabel = originalDatasets[0].data[newMaxIndex].label;

chart.options.scales.x.min = newMinLabel;
chart.options.scales.x.max = newMaxLabel;

chart.update();
}
}

function handleFile(file) {
if (file) {
const reader = new FileReader();

reader.onload = function (e) {
const csvData = e.target.result;
processData(csvData);
};

reader.readAsText(file);
} else {
alert('Bitte eine CSV-Datei auswählen.');
}
}

function handleDrop(event) {
event.preventDefault();
const file = event.dataTransfer.files[0];
handleFile(file);
}

function handleDragOver(event) {
event.preventDefault();
}

function showPreviousData() {
if (startIndex - displayCount >= 0) {
startIndex -= displayCount;
updateChart();
}
}

function showNextData() {
if (startIndex + displayCount < labels.length) {
startIndex += displayCount;
updateChart();
}
}

function updateChart() {
const endIndex = Math.min(startIndex + displayCount, labels.length);
const updatedLabels = labels.slice(startIndex, endIndex);
const updatedDatasets = datasets.map((dataset, index) => ({
...dataset,
data: dataset.data.slice(startIndex, endIndex),
hidden: !originalDatasetVisibility[index],
}));

window.myChart.data.labels = updatedLabels;
window.myChart.data.datasets = updatedDatasets;
window.myChart.options.scales.x.min = updatedLabels[0];
window.myChart.options.scales.x.max = updatedLabels[updatedLabels.length - 1];

window.myChart.update();
}

function removeZoomEventListener() {
window.myChart.ctx.canvas.removeEventListener('wheel', handleZoom);
}



Подробнее здесь: https://stackoverflow.com/questions/777 ... d-chart-js