javascript - Vue charts js crashing on line chart - Stack Overflow

admin管理员组

文章数量:1405602

Using vue charts js I'm having problems with line charts that have a lot of data, such as a 30-day report with each point in the line chart being one minute of each day, that is (43800 points). This way the chart takes a long time to assemble and after assembly the zoom functionality of the same get

Using vue charts js I'm having problems with line charts that have a lot of data, such as a 30-day report with each point in the line chart being one minute of each day, that is (43800 points). This way the chart takes a long time to assemble and after assembly the zoom functionality of the same get

• javascript
• vue.js
• charts
• frontend
• linechart

Share Improve this question Follow edited Mar 21 at 18:01 user281561 asked Mar 21 at 17:56 user281561user281561 1 2

• If you provide some example code and I can better assist you. But my first thoughts are have you used this plugin yet for chat.js? chartjs./docs/latest/configuration/decimation.html – NodeDad Commented Mar 22 at 16:44
• Please provide enough code so others can better understand or reproduce the problem. – Community Bot Commented Mar 22 at 16:44

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

If you're dealing with 43,800 points in a chart, you might run into performance issues. One way to optimize it is by reducing the number of points while maintaining a relatively accurate representation of the data. Since 43,800 points would result in around 22 points per pixel on a full-width chart, you could aggregate the data so that you plot only one point per 10 pixels.

Approach: Downsampling Data

• Calculate the chart width: This helps determine how many points to display
• Determine a number of ppp (points per pixel), if you want a point each 10 pixels, it would be 0.1 (1 point/ 10px)
• Aggregate data: Instead of plotting every raw data point, compute an average for each segment

<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { Chart } from "chart.js/auto";

const chartCanvas = ref(null);

onMounted(() => {
  if (!chartCanvas.value) return;
  const ctx = chartCanvas.value.getContext("2d");

  const rawData; //your data with 43800 values
  const chartWidth = chartCanvas.value.parentElement.clientWidth;
  const numPoints = Math.floor(chartWidth / 10);
  const segmentSize = Math.floor(rawData.length / numPoints);

  const downsampledData = Array.from({ length: numPoints }, (_, i) => {
    const start = i * segmentSize;
    const end = start + segmentSize;
    
    return rawData.slice(start, end).reduce((a, b) => a + b, 0) / segmentSize;
  });

  new Chart(ctx, {
    type: "line",
    data: {
      labels: downsampledData.map((_, i) => i),
      datasets: [{
        label: "Downsampled Data",
        data: downsampledData,
        borderColor: "blue",
        borderWidth: 1,
        pointRadius: 0
      }]
    },
    options: {
      responsive: true,
      scales: {
        x: { display: false },
        y: { beginAtZero: true }
      }
    }
  });
});
</script>

本文标签： javascriptVue charts js crashing on line chartStack Overflow