如何用JavaScript创建多数据图表？遇Highcharts未定义错误求解决

Hey there, let's break down why you're seeing that error and how to fix it—this is a super common gotcha with JavaScript libraries like Highcharts!

The Root Cause #

The error happens because your Highcharts initialization code is running before the Highcharts library has finished loading. Browsers load scripts in the order they appear in your HTML, so if your chart code runs before highcharts.js is fully loaded, the browser doesn't know what Highcharts is yet.

Step-by-Step Fixes #

Here are the two most reliable ways to resolve this:

1. Reorder Your Scripts & Wrap Code in a Ready Callback #

Move your chart initialization code after all Highcharts-related script tags, and wrap it in a DOM-ready event to ensure everything is loaded before running. Using jQuery's $(document).ready() is perfect for this since you're already including jQuery.

Here's your modified, working code:

<body>
    <!-- Put the container first so it exists when the script runs -->
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    <!-- Load dependencies first -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- Initialize the chart after everything is loaded -->
    <script>
        $(document).ready(function() {
            Highcharts.chart('container', {
                chart: { type: 'spline' },
                title: { text: 'Monthly Average Temperature' },
                subtitle: { text: 'Source: WorldClimate.com' },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                yAxis: {
                    title: { text: 'Temperature' },
                    labels: { formatter: function() { return this.value + '°'; } }
                },
                tooltip: { crosshairs: true, shared: true },
                plotOptions: {
                    spline: {
                        marker: { radius: 4, lineColor: '#666666', lineWidth: 1 }
                    }
                },
                series: [{
                    name: 'Tokyo',
                    marker: { symbol: 'square' },
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, { y: 26.5, marker: { symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)' } }, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: 'London',
                    marker: { symbol: 'diamond' },
                    data: [{ y: 3.9, marker: { symbol: 'url(https://www.highcharts.com/samples/graphics/snow.png)' } }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 50, 4.8]
                }]
            });
        });
    </script>
</body>

2. Additional Troubleshooting Checks #

If the fix above doesn't work, double-check these:

• Verify script loads: Open your browser's DevTools (F12), go to the Network tab, and reload the page. Make sure highcharts.js and other modules load with a 200 OK status (no 404 errors).
• Avoid duplicate scripts: Ensure you're not loading multiple versions of Highcharts or conflicting libraries elsewhere in your HTML.
• Use defer/async (optional): If you want to keep scripts in the <head>, add defer to your Highcharts script tags. This tells the browser to load the script in the background and run it after the DOM is ready. Example:

  <script src="https://code.highcharts.com/highcharts.js" defer></script>
  

Give these fixes a shot, and your chart should load without errors!

内容的提问来源于stack exchange，提问作者Rendy Eza Putra