Chart.js v2.1.4图表间歇性显示异常问题求助

Hey there, let's break down why your Chart.js bar chart is sometimes failing to render and fix it step by step. I've looked over your code and spotted a few potential culprits that could cause this frustrating intermittent behavior:

1. Problematic Nested $(document).ready() #

You’ve wrapped your chart initialization inside $(document).ready() within the LoadProviderChart function. This creates unpredictable execution timing:

• If you call LoadProviderChart after the document is already ready, the callback runs immediately—but if the #barChart canvas isn’t fully rendered yet (e.g., due to dynamic DOM changes), the chart can’t attach to it.
• If you call the function before the document is ready, it waits, but multiple calls can lead to race conditions that break rendering.

Fix:
Move the $(document).ready() wrapper outside the function, or add a guard to confirm the canvas exists before proceeding. Here’s a cleaned-up version:

function LoadProviderChart() { 
  const barChartElement = document.getElementById("barChart");
  if (!barChartElement) {
    console.error("Bar chart canvas element not found!");
    return;
  }

  // Rest of your code logic goes here...
}

// Call the function once the DOM is fully ready
$(document).ready(function() {
  LoadProviderChart();
});

2. Unvalidated LocalStorage Data #

Your chart relies entirely on data pulled from localStorage. If this data is missing, corrupted, or hasn’t been written to localStorage yet when the function runs, the subsequent mapping/sorting logic will fail silently—resulting in an empty chart.

Fix:
Add explicit checks for valid data before processing:

function LoadProviderChart() { 
  const barChartElement = document.getElementById("barChart");
  if (!barChartElement) {
    console.error("Bar chart canvas element not found!");
    return;
  }

  const storageKey = 'providercount_' + window.location.pathname.split('/')[4];
  const providercountRaw = window.localStorage.getItem(storageKey);
  if (!providercountRaw) {
    console.error("No provider count data found in localStorage for key:", storageKey);
    return;
  }

  let providercount;
  try {
    providercount = JSON.parse(providercountRaw);
  } catch (e) {
    console.error("Failed to parse provider count data from localStorage:", e);
    return;
  }

  // Rest of your processing logic...
}

3. Fragile Chart Destruction Logic #

Your current check if(window.ProviderChart != null) might not handle edge cases (e.g., if the chart instance exists but is already destroyed). Stale references can prevent a new chart from initializing properly.

Fix:
Use a more robust destruction pattern and reset the reference afterward:

if (window.ProviderChart) {
  try {
    window.ProviderChart.destroy();
    console.log("ProviderChart destroyed");
  } catch (e) {
    console.warn("Error destroying existing chart:", e);
  }
  window.ProviderChart = null; // Clear stale reference
}

4. Unreliable Background Color Value #

Your code fetches --highlight_color via getComputedStyle, but if this CSS variable isn’t defined or fails to load, backgroundColor becomes an empty string. Chart.js might fail to render bars with invalid color values.

Fix:
Add a fallback color to ensure the dataset always has a valid value:

const highlightColor = getComputedStyle(document.body).getPropertyValue('--highlight_color').trim() || '#2196F3'; // Default blue fallback
// ...
datasets: [{
  label: 'Games of Providers',
  data: cutProviderCount.map(function(x) { return x[1].count }),
  backgroundColor: highlightColor,
}],

5. Outdated Chart.js Version #

You’re using Chart.js 2.1.4, which is extremely outdated (released in 2016). This version has known bugs related to chart initialization and DOM interaction that have been fixed in later 2.x releases.

Fix:
Upgrade to the latest version of Chart.js 2.x (currently 2.9.4) to leverage bug fixes without breaking your existing code (2.x maintains full API compatibility).

Final Debugging Tip #

Add a try-catch block around chart initialization to catch unforeseen errors that might be causing intermittent failures:

try {
  window.ProviderChart = new Chart(ctxB, config);
} catch (e) {
  console.error("Failed to initialize ProviderChart:", e);
}

By implementing these fixes, you should eliminate the intermittent display issues and make your chart initialization far more reliable.

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