Highcharts无报错但图表不显示，从API拉取数据后无法渲染如何解决

问题排查结果 #

• 1. jQuery元素选择器错误
     你当前代码中渲染图表的选择器写为$(data[0].chart.renderTo)，而data[0].chart.renderTo的值是chart_ID，id选择器需要在前面拼接#才能正确匹配到页面上的DOM元素，未找到对应元素时Highcharts不会触发报错，直接终止渲染流程。
• 2. Y轴最大值配置不合理
     你将y轴max设为了1000000，但两组系列的最大值仅为7500，即便图表渲染成功，数据折线也会贴在X轴顶部，视觉上很容易误以为没有渲染成功。
• 3. 变量未声明（可选优化）
     代码中data、apiData、highChartInfo均未使用var/let/const声明，会直接挂载到全局对象，部分严格模式下可能引发异常。

修复后的代码 #

JS部分 #

$(document).ready(function() {
  // 全局开启Highcharts错误展示
  Highcharts.setOptions({
    lang: {
      numericSymbols: null
    },
    displayErrors: true // 全局开启错误提示
  });

  // 监听Highcharts全局错误事件，所有错误都会输出到控制台
  Highcharts.addEventListener('error', function(e) {
    console.error('Highcharts报错：', e);
  });

  const data = [{
    "chart": {
      "height": 500,
      "renderTo": "chart_ID",
      "type": "line"
    },
    "plotOptions": {
      "line": {
        "dataLabels": {
          "enabled": true
        },
        "enableMouseTracking": false
      }
    },
    "series": [{
      "data": [5000.0, 4100.0, 1000.0, 7500.0, 5100.0, 5000.0],
      "name": "Amount"
    }, {
      "data": [179, 86, 150, 393, 188, 322],
      "name": "Millage"
    }],
    "title": {
      "text": "Jhpiego Fuel Consumption"
    },
    "xAxis": {
      "categories": ["3 Jul", "12 Jul", "13 Jul", "14 Jul", "15 Jul", "16 Jul"]
    },
    "yAxis": {
      // 移除固定max配置，让Highcharts自动适配数据范围，或者根据实际数据设置合理值，比如10000
      // max: 1000000,
      title: {
        "text": "Fuel Price"
      }
    }
  }]
  const apiData = data[0];

  const highChartInfo = {
    chart: {
      renderTo: apiData.chart.renderTo,
      type: apiData.chart.type,
      height: 500
    },
    plotOptions: {
      line: {
        dataLabels: {
          enabled: apiData.plotOptions.line.dataLabels.enabled
        },
        enableMouseTracking: apiData.plotOptions.line.enableMouseTracking
      }
    },
    title: {
      text: apiData.title.text
    },
    xAxis: {
      categories: apiData.xAxis.categories
    },
    yAxis: {
      title: {
        text: apiData.yAxis.title.text
      },
      max: apiData.yAxis.max
    },
    series: [{
        name: apiData.series[0].name,
        data: apiData.series[0].data
      },
      {
        name: apiData.series[1].name,
        data: apiData.series[1].data
      }
    ],
  }

  console.log(highChartInfo)
  // 修复选择器，拼接#前缀
  $('#' + data[0].chart.renderTo).highcharts(highChartInfo);
});

HTML部分无需修改 #

Highcharts错误展示开启方法 #

1. 全局配置开启：在Highcharts.setOptions中添加displayErrors: true，默认情况下该配置为开启状态，若之前被手动关闭可以重新打开
2. 全局错误监听：绑定Highcharts.addEventListener('error', callback)事件，所有Highcharts运行时错误都会被捕获，可以在回调中自定义打印日志、弹窗提示等逻辑
3. 单图表配置：可以在单个图表的chart配置项中添加displayErrors: true，仅针对当前图表开启错误提示

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