Chart.js堆叠柱状图加载性能问题排查与优化咨询

Hey there, let's break down your performance issue and fix it step by step—your core problem isn't the PHP loops, it's how you're structuring the data for Chart.js.

First, Identify the Bottleneck #

Your current PHP code generates one dataset per day per intensity value. For example, if you have 30 days and 10 intensity levels, that's 300 datasets! Chart.js has to render every single one of these, even though most of their data arrays are filled with null values. This is the main reason your chart is loading slowly—hundreds of datasets create exponential rendering overhead in the browser.

Fix #1: Refactor Your PHP Data Structure #

Instead of creating a dataset for every individual day-intensity pair, group data by intensity level. Each intensity gets one dataset, with a data array that matches the length of your labels (one value per day, null if no data exists). This will cut your dataset count from days × intensity levels to just number of intensity levels—a massive reduction.

Here's a revised PHP code example:

// Step 1: Create a map of intensity levels to pre-configured datasets
$datasetMap = [];
foreach ($intColors as $level => $color) {
    $datasetMap[$level] = [
        'type' => 'bar',
        'label' => "Intensity " . $level,
        'backgroundColor' => $color,
        'data' => array_fill(0, $curday + 1, null) // Initialize with nulls matching label count
    ];
}

// Step 2: Fill in actual values from your dataset
for ($cd = 0; $cd <= $curday; $cd++) {
    for ($i = 0; $i < $maxy; $i++) {
        if (!isset($dataset[$i][$cd])) break;
        
        $level = $intensity[$i][$cd];
        $value = $dataset[$i][$cd];
        $datasetMap[$level]['data'][$cd] = $value;
    }
}

// Convert map to a plain array for JSON
$arrDatasets = array_values($datasetMap);

// Generate your final JSON as before
$arrReturn = ['labels' => $labels, 'datasets' => $arrDatasets];
$mydata = json_encode($arrReturn);

Fix #2: Optimize Chart.js Frontend Rendering #

Even with fewer datasets, you can tweak Chart.js options to speed up rendering:

• Disable animations: Animations are resource-heavy with large datasets. Add this to your options:

  animation: false
  

  Or if you still want subtle feedback, reduce the animation duration:

  animation: { duration: 100 }
  

• Simplify tooltips: If you're using complex tooltip logic, try disabling them temporarily to test performance, or switch to a simpler mode:

  options: {
    plugins: {
      tooltip: { mode: 'nearest', intersect: false }
    }
  }
  

• Use the latest Chart.js version: Newer releases include performance improvements for large datasets.

Verify with Chrome DevTools #

After making these changes, re-run your performance profile in DevTools:

• Look for reduced time spent in Chart.render() or draw() methods
• Check the "Frames" tab to confirm smoother rendering

These changes should drastically cut down the browser's workload and fix your performance issues.

内容的提问来源于stack exchange，提问作者nico