You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Google Charts报错:Uncaught TypeError: PieChart不是构造函数

解决Google Charts中google.visualization.PieChart is not a constructor报错
  • 核心问题:未加载PieChart所属的包
    你当前加载的是line包,但PieChart属于corechart包,必须先加载这个包才能调用饼图构造函数。修改加载代码:

    google.charts.load('current', {'packages':['corechart']});
    

    若同时需要折线图和饼图,可同时加载两个包:

    google.charts.load('current', {'packages':['line', 'corechart']});
    
  • 数据格式不匹配饼图要求
    饼图仅需要两列数据(类别标签+对应数值),你当前定义了4列数据,不符合饼图的结构要求。如果要展示C1、C2、C3的占比,需调整DataTable结构:

    var data = new google.visualization.DataTable();
    data.addColumn('string', '类别');
    data.addColumn('number', '数值');
    // 取第一条数据的C1、C2、C3值生成饼图数据
    if (jsonData.length > 0) {
      data.addRows([
        ['C1', jsonData[0]['c1']],
        ['C2', jsonData[0]['c2']],
        ['C3', jsonData[0]['c3']]
      ]);
    }
    

    如果你原本想绘制折线图,只是误写了PieChart,可将构造函数改为google.visualization.LineChart(经典风格)或google.charts.Line(Material风格)。

  • 配置项不匹配
    你当前的options使用了chart.title,这是Material风格图表的写法,而google.visualization.PieChart属于经典图表,配置项需直接写title:

    var options = {
      title: '<? echo $equipo;?>',
      width: 300,
      height: 200,
      legend: {position: 'none'}
    };
    

修正后的完整代码示例

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  $.ajax({
    url: "data.php?ne=<? echo $equipo;?>",
    dataType: "json",
    success: function (jsonData) {
      var data = new google.visualization.DataTable();
      data.addColumn('string', '类别');
      data.addColumn('number', '数值');
      
      if (jsonData.length > 0) {
        data.addRows([
          ['C1', jsonData[0]['c1']],
          ['C2', jsonData[0]['c2']],
          ['C3', jsonData[0]['c3']]
        ]);
      }

      var options = {
        title: '<? echo $equipo;?>',
        width: 300,
        height: 200,
        legend: {position: 'none'}
      };
      
      var chart = new google.visualization.PieChart(document.getElementById('<? echo $equipo;?>'));
      chart.draw(data, options);
    }
  });
}
</script>

内容的提问来源于stack exchange,提问作者K10YW

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 08:15:41