Javascript 谷歌用数字绘制时间线_Javascript_Google Visualization

Javascript 谷歌用数字绘制时间线

javascript google-visualization

Javascript 谷歌用数字绘制时间线,javascript,google-visualization,Javascript,Google Visualization,我正在尝试使用谷歌图表库中的时间线，用数字代替日期。当我将提供的基本示例更改为使用数字而不是日期时，我会在控制台中无误地在页面上获得以下输出。无法读取未定义的属性“v” 下面是我正在修改的基本示例简单地将开始和结束类型从日期更改为数字，然后将每行的开始和结束值更改为数字似乎不起作用下面是一个JSFIDLE，显示了我修改了您的脚本后出现的问题 <html> <head> <script type='text/javascript' src='http

我正在尝试使用谷歌图表库中的时间线，用数字代替日期。当我将提供的基本示例更改为使用数字而不是日期时，我会在控制台中无误地在页面上获得以下输出。

无法读取未定义的属性“v”

下面是我正在修改的基本示例

简单地将开始和结束类型从日期更改为数字，然后将每行的开始和结束值更改为数字似乎不起作用

下面是一个JSFIDLE，显示了我修改了您的脚本后出现的问题

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {'packages':['annotatedtimeline']});
      google.setOnLoadCallback(drawChart);
function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('date', 'Date');
        dataTable.addColumn( 'number', 'Start' );
        dataTable.addColumn( 'number', 'End' );
        dataTable.addColumn( 'string', 'President' );
        dataTable.addRows([
          [new Date(2015, 1 ,1), 5 , 9,'Washington' ],
          [new Date(2015, 1 ,1),      10,  12,  'Adams' ],
          [new Date(2015, 1 ,1),  1,  7, 'Jefferson' ]]);




        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(dataTable, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>

  </body>
</html>


load（'visualization'，'1'，{'packages'：['annotatedtimeline']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var dataTable=new google.visualization.dataTable（）；
dataTable.addColumn（'date'，'date'）；
addColumn（'number'，'Start'）；
addColumn（'number'，'End'）；
addColumn（'string'，'President'）；
dataTable.addRows([
[新日期（2015年1月1日），5月9日，'华盛顿']，
[新日期（2015年1月1日），2012年10月12日，'Adams']，
[新日期（2015年1月1日），1月7日，“杰斐逊]）；
var chart=new google.visualization.AnnotatedTimeLine（document.getElementById（'chart_div'））；
draw（dataTable，{displayAnnotations:true}）；
}
//请注意，必须明确指定容器元素的大小！

如果你用这个图表第一个数据必须是日期

我可以给你举个例子

<html>
  <head>
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      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});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>

  </body>
</html>


load（'visualization'，'1'，{'packages'：['annotatedtimeline']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'date'，'date'）；
data.addColumn（'number'，'salled Pencils'）；
data.addColumn（'string'，'title1'）；
data.addColumn（'string'，'text1'）；
data.addColumn（'number'，'salled Pens'）；
data.addColumn（'string'，'title2'）；
data.addColumn（'string'，'text2'）；
data.addRows([
[新日期（2008年1月1日），30000，未定义，未定义，40645，未定义，未定义]，
[新日期（2008年1月2日），14045，未定义，未定义，20374，未定义，未定义]，
[新日期（2008年1月3日），55022，未定义，未定义，50766，未定义，未定义]，
[新日期（2008年1月4日），75284，未定义，未定义，14334，'缺货'，'下午4点钢笔缺货'，
[新日期（2008年1月5日），41476，“购买的钢笔”，“购买的20万支钢笔”，66467，未定义，未定义]，
[新日期（2008年1月6日），33322，未定义，未定义，39463，未定义，未定义]
]);
var chart=new google.visualization.AnnotatedTimeLine（document.getElementById（'chart_div'））；
draw（数据，{displayAnnotations:true}）；
}
//请注意，必须明确指定容器元素的大小！

通过使用数字作为列类型，而不是日期，谷歌假定，无论正确与否，您使用的是毫秒

如果您按如下方式更新数据：

[新日期（2015年1月1日），50009000，'华盛顿'，

[新日期（2015年1月1日），10000120000，'Adams'，

[新日期（2015年1月1日），1000，7000，'Jefferson']]
它将展示一些东西。
我想指出，当前的答案是针对注释时间线的，这与OP询问的时间线不同。需要使用不同格式的数据才能保存
number
类型中的Start
和End
列实际上是指unix时间中的日期。例如，新日期（2016,0,1）.getTime（）

这是一个有效的方法。
您是否也可以提供一个JSFIDLE，因为我无法让它工作。非常感谢。