HighCharts空/Null JSON响应下能否显示柱状图？技术咨询

Absolutely, Highcharts does support rendering charts even when your JSON response is empty or null — the issue in your current code is that you're only building the categories and series arrays when there's valid data to process. If the response is empty, those arrays stay empty, and Highcharts doesn't have the structure it needs to render even a blank chart frame.

Fix Steps & Modified Code #

Here's how to adjust your code to handle empty/null responses gracefully, while maintaining your existing functionality when data is present:

categories = [];
const seriesNames = ['MR', 'MR_HIT', 'MR_HIT_PERCENTAGE'];
// Pre-initialize series structure so Highcharts has valid series objects even with no data
let series = seriesNames.map(name => ({ name, data: [] }));

$.getJSON('ajax/ams_sla_report_chart.php', function(data) {
  // Only process data if it exists and has content
  if (data && data.length > 0) {
    data.forEach(function(arr) {
      arr.forEach(function(el, i) {
        if (i === 0) {
          categories.push(el);
        } else {
          // Push data to the pre-initialized series array
          series[i - 1].data.push(el);
        }
      });
    });
  }

  var chart = new Highcharts.Chart({
    chart: { renderTo: 'containers', type: 'column', inverted: false },
    legend: { layout: 'horizontal', align: 'right', verticalAlign: 'middle' },
    // Fallback to a default category if no categories exist
    xAxis: { categories: categories.length > 0 ? categories : ['No Data'] },
    plotOptions: { column: { minPointLength: 3 } },
    title: { text: 'Priority Based on SLA' },
    // Add a subtitle to notify users when there's no data
    subtitle: { 
      text: categories.length === 0 && series.every(s => s.data.length === 0) 
        ? 'No data available to display' 
        : '' 
    },
    series: series
  });

  // Keep your existing 3D slider functionality
  function showValues() {
    $('#alpha-value').html(chart.options.chart.options3d?.alpha || 0);
    $('#beta-value').html(chart.options.chart.options3d?.beta || 0);
    $('#depth-value').html(chart.options.chart.options3d?.depth || 0);
  }

  $('#sliders_eng input').on('input change', function () {
    chart.options.chart.options3d[this.id] = parseFloat(this.value);
    showValues();
    chart.redraw(false);
  });

  showValues();
});

Key Improvements #

• Pre-initialized Series: We use seriesNames.map to create a valid series array upfront, even if there's no data. Each series object has a name and empty data array, which Highcharts recognizes as valid.
• Null/Empty Data Handling: Added a check to only process data if it exists and has content, avoiding errors from looping over empty arrays.
• Fallback X-Axis: If no categories are found, we set a default ['No Data'] category so the x-axis renders properly instead of being blank.
• User-Friendly Empty State: The subtitle shows a clear message when there's no data to display, improving UX instead of just showing an empty chart area.

With these changes, your chart will render in all scenarios:

• When JSON has valid data: Shows your column bars as expected.
• When JSON is empty/null: Renders the chart frame with a "No data available" message and proper legend.

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