Google圖表時間表與數字
[英]Google charts timeline with numbers
問題描述
我正在嘗試使用Google圖表庫中的時間軸，而不是日期，而是數字。 當我更改提供的基本示例以使用數字而不是日期時，我在頁面上獲得以下輸出，控制台中沒有錯誤。 Cannot read property 'v' of undefined
這是我正在修改https://developers.google.com/chart/interactive/docs/gallery/timeline#SimpleExample的基本示例
簡單地將開始和結束類型從日期更改為數字，然后將每行的開始和結束值更改為數字似乎不起作用。
這是一個顯示問題的jsfiddle http://jsfiddle.net/t26yu0w8/
3 個解決方案
解決方案1
2 已采納 2016-03-12 09:39:28
我想指出的是，當前答案是針對帶annotatedtimeline timeline ，與OP詢問的timeline不同。 時間線需要的數據格式與帶注釋的時間線不同 。
number類型的“ Start和“ End列實際上是指以Unix時間表示的日期。 例如new Date(2016,0,1).getTime()
這是有效的OP的jsfiddle 。
解決方案2
1 2015-02-18 23:55:36
我修改了您的腳本。
<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>
如果使用此圖表，則第一個數據必須是日期。
我可以給你舉個例子。
<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>
解決方案3
1 2015-09-07 04:29:26
通過使用數字作為列類型（而不是日期），Google會正確或不正確地假設您使用的是毫秒。
如果您按以下方式更新數據：
[new Date(2015, 1 ,1), 5000, 9000,'Washington' ],
[new Date(2015, 1 ,1),10000,12000,'Adams' ],
[new Date(2015, 1 ,1), 1000, 7000,'Jefferson' ]]);
它會顯示一些東西。
使用Google時間線圖表的多個時間線圖表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.