2016-01-06 47 views
0

当前我正在使用谷歌图表创建图表。为此,我创建了一个名为myJchart的自定义函数,如下所示。将图表类型参数作为谷歌图表函数传递给自定义函数

function myJChart(ChartPackage,ChartType,ChartData,ChartTitel,ChartSubtitle,Chart3D,ChartHeight,ChartWidth,ChartDivID){ 

     google.load("visualization", "1", {packages:[ChartPackage]}); 
     google.setOnLoadCallback(drawChart); 
     function drawChart() { 
      var data = google.visualization.arrayToDataTable(ChartData); 
      var options = { 
       title: ChartTitel, 
       subtitle: ChartSubtitle, 
       is3D: true, 
       height: ChartHeight, 
       width: ChartWidth    
       }; 


     var chart = new google.visualization.PieChart(document.getElementById(ChartDivID)); 
      chart.draw(data, options); 
     } 

    } 

,并调用函数

myJChart('corechart','PieChart',<?php echo $jsonTable;?>,'test','test again',true,'600','800','chart_div'); 

这上面的功能工作良好。 现在的问题是,当我通过ChartType参数,以谷歌google.visualization.ChartType 会收到以下错误消息

Uncaught TypeError: google.visualization.ChartType is not a function

我用[图图表]我,但我得到这个错误Unexpected token [ 任何建议都会有所帮助。

回答

1

我会建议使用ChartWrapper Class此...

主要是因为你只需要调用google.load一次。

ChartWrapper将根据图表类型动态加载所需内容。

google.load("visualization", "1.1", {packages:["controls"]}); 
 
google.setOnLoadCallback(googleLoaded); 
 

 
// test data 
 
var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea','Rwanda', 'Average'], 
 
       ['2004/05', 165, 938, 522, 998, 450, 114.6], 
 
       ['2005/06', 135, 1120, 599, 1268, 288, 382], 
 
       ['2006/07', 157, 1167, 587, 807, 397, 623], 
 
       ['2007/08', 139, 1110, 615, 968, 215, 409.4], 
 
       ['2008/09', 136, 691, 629, 1026, 366, 569.6]]; 
 

 
function googleLoaded() { 
 
    myJChart('corechart', 'BarChart', rowData1, 'test', 'test again', true, 600, 800, 'chart_div'); 
 
} 
 

 
function myJChart(ChartPackage, ChartType, ChartData, ChartTitel, ChartSubtitle, Chart3D, ChartHeight, ChartWidth, ChartDivID){ 
 
    chart = new google.visualization.ChartWrapper({ 
 
     chartType: ChartType, 
 
     containerId: ChartDivID, 
 
     dataTable: google.visualization.arrayToDataTable(ChartData), 
 
     options: { 
 
      title: ChartTitel, 
 
      subtitle: ChartSubtitle, 
 
      is3D: Chart3D, 
 
      height: ChartHeight, 
 
      width: ChartWidth 
 
     } 
 
    }); 
 

 
    chart.draw(); 
 
}
<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>

+0

完美的答案... ANS thanx的ChartWrapper –

+0

喝彩!乐意效劳。请查看[仪表板和控件](https://developers.google.com/chart/interactive/docs/gallery/controls),我正在使用[ChartEditor](https://developers.google.com)/chart/interactive/docs/reference#google_visualization_charteditor)以允许用户自定义他们自己的仪表板视图... – WhiteHat

相关问题