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
相关产品推荐
相关产品推荐

