Google Charts Gauge控件无法显示内容问题求助

Looks like your Google Charts Gauge isn’t showing up because the JavaScript initialization steps are incomplete—Google Charts requires a specific load sequence that it seems you haven’t fully implemented yet. Let’s walk through fixing this step by step:

Step 1: Complete the JavaScript Initialization #

Replace the partial code in fermenterVisualization.js with this full implementation, which follows Google’s required workflow:

// Load the Visualization API and the gauge package
google.charts.load('current', {'packages':['gauge']});

// Set a callback to run when the Google Visualization API is loaded
google.charts.setOnLoadCallback(drawChart);

// Callback function to draw the gauge
function drawChart() {
  // Create the data table with your metrics
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Temperature', 42], // Replace with your actual data
    ['Pressure', 76]     // Add/remove gauges as needed for your brewery use case
  ]);

  // Configure chart options (customize ranges/colors to fit your needs)
  var options = {
    width: 400,
    height: 120,
    redFrom: 90,
    redTo: 100,
    yellowFrom:75,
    yellowTo: 90,
    minorTicks: 5
  };

  // Instantiate the gauge and draw it into the target div
  var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Step 2: Verify Your HTML Setup #

Your existing HTML structure is mostly correct, but double-check these details:

• Ensure the loader.js script loads before your custom fermenterVisualization.js (your current @section Scripts placement should handle this, just confirm the section renders after the loader script and the chart_div element).
• The chart_div has valid dimensions (your width: 400px; height: 120px; setting works perfectly for gauges).

Step 3: Debug with Browser Console #

If it still doesn’t render, open your browser’s developer tools (F12) and check the Console tab for errors:

• Look for google is not defined (means the loader script failed to load)
• Or errors about drawChart not being found (means your callback isn’t properly registered)

Test with a Standalone Snippet #

Here’s a complete standalone HTML file you can run to confirm the gauge works on its own:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
  <div id="chart_div" style="width: 400px; height: 120px;"></div>

  <script type="text/javascript">
    google.charts.load('current', {'packages':['gauge']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Ferment Temp', 68],
        ['PH Level', 4.5]
      ]);

      var options = {
        width: 400, height: 120,
        greenFrom: 0, greenTo: 70,
        yellowFrom:70, yellowTo: 90,
        redFrom:90, redTo:100,
        minorTicks: 5
      };

      var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</body>
</html>

If this standalone snippet works, the issue is likely in how your partial view/script section integrates with the rest of your app—focus on ensuring the script loads after the DOM is ready and the Google API is fully loaded.

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