在Google Charts中硬编码统计数据绘制箱线图无渲染问题排查

你的问题核心有两个：一是所有统计列都被设为interval角色，缺少主数据列，LineChart需要一个基础数据列来定位箱线图的位置；二是重复调用google.charts.load会覆盖之前的配置，导致回调执行异常。

修正方案 #

1. 调整DataTable结构
   将中位数列改为普通数值列（移除role: 'interval'），其余min、max、四分位数作为interval列，且每个interval列要通过id明确对应箱线图所需的统计标识（min/max/firstQuartile/thirdQuartile），主数据列（中位数）是箱线图的基准。

2. 合并加载逻辑
   只调用一次google.charts.load，同时加载corechart和table包，用统一的回调触发两个绘制函数，避免重复加载导致的冲突。

3. 修正配置项
   确保intervals和interval配置中的id与DataTable里的列id对应，让图表正确识别各统计值的作用。

修正后的完整代码 #

JavaScript部分

// 合并加载所需包，只调用一次load
google.charts.load('current', {
  'packages': ['corechart', 'table']
});
google.charts.setOnLoadCallback(function() {
  drawBoxPlot();
  drawTable();
});

function drawBoxPlot() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: 'Var',
        type: 'string'
      },
      // 中位数作为主数据列，去掉interval角色
      {
        label: 'Median',
        id: 'median',
        type: 'number'
      },
      // 其余统计值作为interval列，明确id对应
      {
        label: 'Max',
        id: 'max',
        type: 'number',
        role: 'interval'
      },
      {
        label: 'Min',
        id: 'min',
        type: 'number',
        role: 'interval'
      },
      {
        label: '1st Q',
        id: 'firstQuartile',
        type: 'number',
        role: 'interval'
      },
      {
        label: '3rd Q',
        id: 'thirdQuartile',
        type: 'number',
        role: 'interval'
      }
    ],
    ['A', 100, 120, 85, 93, 107],
    ['B', 120, 140, 90, 104, 127],
    ['C', 130, 140, 100, 111, 136],
    ['D', 90, 95, 85, 86.5, 93.5],
    ['E', 100, 120, 85, 93, 107],
    ['F', 120, 140, 90, 104, 127],
    ['G', 130, 140, 100, 111, 136],
    ['H', 90, 95, 85, 86.5, 93.5],
    ['I', 100, 120, 85, 93, 107],
    ['J', 120, 140, 90, 104, 127],
    ['K', 130, 140, 100, 111, 136],
    ['L', 90, 95, 85, 86.5, 93.5]
  ]);

  var options = {
    title: 'Box Plot',
    height: 500,
    legend: {
      position: 'none'
    },
    hAxis: {
      gridlines: {
        color: '#fff'
      }
    },
    lineWidth: 0,
    series: [{
      'color': '#D3362D'
    }],
    intervals: {
      barWidth: 0.6,
      boxWidth: 0.6,
      lineWidth: 2,
      style: 'boxes'
    },
    interval: {
      max: {
        style: 'bars',
        fillOpacity: 0.3,
        color: '#777'
      },
      min: {
        style: 'bars',
        fillOpacity: 0.3,
        color: '#777'
      },
      firstQuartile: {
        style: 'boxes'
      },
      thirdQuartile: {
        style: 'boxes'
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('box_plot'));
  chart.draw(data, options);
}

function drawTable() {
  var data = google.visualization.arrayToDataTable([
    [{
        label: 'Var',
        type: 'string'
      },
      {
        label: 'Median',
        type: 'number'
      },
      {
        label: 'Max',
        type: 'number'
      },
      {
        label: 'Min',
        type: 'number'
      },
      {
        label: '1st Q',
        type: 'number'
      },
      {
        label: '3rd Q',
        type: 'number'
      }
    ],
    ['A', 100, 120, 85, 93, 107],
    ['B', 120, 140, 90, 104, 127],
    ['C', 130, 140, 100, 111, 136],
    ['D', 90, 95, 85, 86.5, 93.5],
    ['E', 100, 120, 85, 93, 107],
    ['F', 120, 140, 90, 104, 127],
    ['G', 130, 140, 100, 111, 136],
    ['H', 90, 95, 85, 86.5, 93.5],
    ['I', 100, 120, 85, 93, 107],
    ['J', 120, 140, 90, 104, 127],
    ['K', 130, 140, 100, 111, 136],
    ['L', 90, 95, 85, 86.5, 93.5]
  ]);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    showRowNumber: true,
    width: '100%',
    height: '100%'
  });
}

HTML部分

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="box_plot"></div>
<div id="table_div"></div>

关键说明 #

• 主数据列（中位数）是箱线图的锚点，必须存在且不能是interval角色
• 各interval列的id必须严格匹配Google Charts箱线图预期的标识（min/max/firstQuartile/thirdQuartile），这样图表才能正确识别每个数值的作用
• 合并加载逻辑避免了重复调用google.charts.load导致的回调冲突问题

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