Javascript';应为对象';使用Google可视化API时

Javascript';应为对象';使用Google可视化API时,javascript,google-visualization,Javascript,Google Visualization,大家好,我正在创建一个小类来帮助我使用Google可视化API。你可以在这里看到它是如何工作的 下面是谷歌的实现 google.load('visualization', '1', {'packages':['annotatedtimeline']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataT

大家好,我正在创建一个小类来帮助我使用Google可视化API。你可以在这里看到它是如何工作的

下面是谷歌的实现

google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
这是我上的课,我对它有意见。 该类使向图形中添加数据变得更容易,而且对于我正在尝试的操作来说效果更好。基本上,该类不是使用一堆未定义的值来创建列,而是为您创建列,您不必跟踪每个列的位置/值

 function GraphManager(dataTable)
 {
     this.graphData = new Array();
     this.dataTable = dataTable;

     this.titleFinder = new Object(); // used to keep track of the indices

     this.dataTable.addColumn('date', 'Date');

     this.addSet = function(title)
     {

         var setCount = (this.dataTable.getNumberOfColumns() -1) / 3; //used for the column name
         var place = this.dataTable.getNumberOfColumns(); 

         this.titleFinder[title] = place; //the title of the column and its location

         this.dataTable.addColumn('number', title);
         this.dataTable.addColumn('string', 'title' + setCount);
         this.dataTable.addColumn('string', 'text' + setCount); 

     }

     this.addPoint = function(title, date, number)
     {
         //this function finds the location of the category
         //and inserts a column with data at the location


         var place = titleFinder[title]; //get the location

         var column = new Array(dataTable.getNumberOfColumns()); 
         column[0] = date;
         column[place] = number;

         for (var i = 0;i<place; i++)
         {
            column[i] = undefined; 
         }

         for (var i = place + 1; i<dataTable.getNumberOfColumns(); i++)
         {
             column[i] = undefined;
         }

         var next = this.graphData.length;
         this.graphData[next] = column;
         data.addRows(graphData);

     }


 }
}

使用此HTML正文

<input type="button" onclick="printGraph()" value="Draw Graph">
<div id='chart_div' style='width: 800px; height: 350px;'></div>

问题:我在gm.addSet(title)行上得到一个“预期对象”错误。基本上,我不能使用GraphManager类。我做错了什么?

不应该是“dataTable”而不是“tableData”

for(var i=place+1;i我不知道,根据:

http://code.google.com/apis/visualization/documentation/reference.html#DataTable
count不是一个属性,但我看到您在代码的许多地方都引用了它:

var column = new Array(dataTable.count)

有dataTable.getNumberOfColumns()但是

好的,我解决了这个问题。基本上我遗漏了一大堆“这个”语句,当我创建一个新日期时,我使用了括号而不是括号。我还意识到,当我添加一组新数据时,我需要遍历旧数据以添加空列。如果有人感兴趣,下面是完成的代码……如果您在不同日期添加数据,或者不知道有多少数据,这非常有用你将拥有一套

 function GraphManager(adataTable)
 {
     this.graphData = new Array();
     this.dataTable = adataTable;

     this.titleFinder = new Object(); // used to keep track of the indices

     this.dataTable.addColumn('date', 'Date');

     this.addSet = function(title)
     {

         var setCount = (this.dataTable.getNumberOfColumns() -1) / 3; //used for the column name
         var pointsCount = this.graphData.length;
         var place = this.dataTable.getNumberOfColumns();

         this.titleFinder[title] = place; //the title of the column and its location

         this.dataTable.addColumn('number', title);
         this.dataTable.addColumn('string', 'title' + setCount);
         this.dataTable.addColumn('string', 'text' + setCount);

         var newCount = this.dataTable.getNumberOfColumns();



         for (var i = 0; i<pointsCount; i++)
         {
             for (var j=place; j<newCount; j++)
             {
                 this.graphData[i][j] = undefined;
             }


         }  

     }

     this.addPoint = function(title, date, number)
     {
         //this function finds the location of the category
         //and inserts a column with data at the location


         var place = this.titleFinder[title]; //get the location

         var column = new Array(this.dataTable.getNumberOfColumns()); 
         column[0] = date;
         column[place] = number;

         for (var i = 1;i<place; i++)
         {
            column[i] = undefined; 
         }

         for (var i = place + 1; i<this.dataTable.getNumberOfColumns(); i++)
         {
             column[i] = undefined;
         }

         var next = this.graphData.length;
         this.graphData[next] = column;
         this.dataTable.addRows(this.graphData);

     }


 }

谢谢,没错,我已经解决了这个问题,但是我仍然有“object expected”错误。上面的代码部分在你的HTML页面中的什么地方?我在下面添加了它作为参考,谢谢
var column = new Array(dataTable.count)
 function GraphManager(adataTable)
 {
     this.graphData = new Array();
     this.dataTable = adataTable;

     this.titleFinder = new Object(); // used to keep track of the indices

     this.dataTable.addColumn('date', 'Date');

     this.addSet = function(title)
     {

         var setCount = (this.dataTable.getNumberOfColumns() -1) / 3; //used for the column name
         var pointsCount = this.graphData.length;
         var place = this.dataTable.getNumberOfColumns();

         this.titleFinder[title] = place; //the title of the column and its location

         this.dataTable.addColumn('number', title);
         this.dataTable.addColumn('string', 'title' + setCount);
         this.dataTable.addColumn('string', 'text' + setCount);

         var newCount = this.dataTable.getNumberOfColumns();



         for (var i = 0; i<pointsCount; i++)
         {
             for (var j=place; j<newCount; j++)
             {
                 this.graphData[i][j] = undefined;
             }


         }  

     }

     this.addPoint = function(title, date, number)
     {
         //this function finds the location of the category
         //and inserts a column with data at the location


         var place = this.titleFinder[title]; //get the location

         var column = new Array(this.dataTable.getNumberOfColumns()); 
         column[0] = date;
         column[place] = number;

         for (var i = 1;i<place; i++)
         {
            column[i] = undefined; 
         }

         for (var i = place + 1; i<this.dataTable.getNumberOfColumns(); i++)
         {
             column[i] = undefined;
         }

         var next = this.graphData.length;
         this.graphData[next] = column;
         this.dataTable.addRows(this.graphData);

     }


 }
     var data = new google.visualization.DataTable();
     var gm = new GraphManager(data);

     var title = "testcategory";
     var title2 = "cat";

     gm.addSet(title);
     gm.addPoint(title, new Date(2010, 5, 10), 100);
     gm.addPoint(title, new Date(2010, 6, 10), 200);
     gm.addPoint(title, new Date(2010, 2, 10), 300);


     gm.addSet(title2);
     gm.addPoint(title2, new Date(2010, 6, 10), 100);
     gm.addPoint(title2, new Date(2010, 2, 10), 500);

     var chart = newgoogle.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
     chart.draw(gm.dataTable, {displayAnnotations: true});