Highcharts折线图不显示求助：月度每日贷款总额图表开发

Let's break down why your Highcharts line chart isn't showing up—here are the most common culprits and fixes based on the code snippet you shared:

• Missing or misformatted series data
  This is the #1 reason line charts fail to render. Highcharts requires your series array to contain data points formatted correctly for a datetime x-axis. Each point should be an array like [timestamp, value], where the timestamp uses UTC (matching your x-axis setup).

  Example of correct series data:

  series: [{
      name: 'Daily Loan Total',
      data: [
          [Date.UTC(2024, 4, 1), 15000],
          [Date.UTC(2024, 4, 2), 22000],
          // ... rest of your daily data points for the month
      ]
  }]
  

• Check if the target container exists
  Make sure there's a DOM element with the ID lineChart on your page, and it has explicit width/height set (Highcharts needs this to render properly):

  <div id="lineChart" style="width: 800px; height: 400px;"></div>
  

• Verify your y-axis configuration
  You have yAxis: {...} but didn't include the details. A broken or incomplete y-axis config can break the entire chart. A minimal working setup might look like this:

  yAxis: {
      title: {
          text: 'Total Loan Amount'
      },
      allowDecimals: false // Optional, if your loan totals are whole numbers
  }
  

• Double-check x-axis date range logic
  Your min/max calculation looks right, but confirm that your data points fall within this range. If all your data is outside the defined min/max, the chart will appear empty.

Here's a full working example putting all these fixes together:

// Wait for the DOM to load before initializing the chart
document.addEventListener('DOMContentLoaded', function() {
    Highcharts.chart('lineChart', {
        chart: { 
            renderTo: 'lineChart', 
            type: 'line' 
        },
        title: { 
            text: 'Total Pinjaman Bulan Ini' 
        },
        xAxis: { 
            type: 'datetime', 
            min: Date.UTC(new Date().getFullYear(), new Date().getMonth(), 1), 
            max: Date.UTC(new Date().getFullYear(), new Date().getMonth()+1, 0), 
            tickInterval: 24 * 3600 * 1000, 
            labels: { 
                step: 5, 
                style: { 
                    fontSize: '10px', 
                    fontFamily: 'Arial,sans-serif' 
                } 
            } 
        },
        yAxis: {
            title: {
                text: 'Jumlah Pinjaman'
            }
        },
        series: [{
            name: 'Harian',
            data: [
                [Date.UTC(new Date().getFullYear(), new Date().getMonth(), 1), 1250000],
                [Date.UTC(new Date().getFullYear(), new Date().getMonth(), 2), 1800000],
                [Date.UTC(new Date().getFullYear(), new Date().getMonth(), 3), 950000],
                // Add remaining daily data points here
            ]
        }]
    });
});

Don't forget to include the Highcharts library in your HTML before your script:

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

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