問題描述
替代谷歌可視化的註釋時間線？（圖形庫） (Alternative to Google Visualization's Annotated Timeline? (graphing library))
Is there any alternative to Google's Annotated Timeline Visualization API?
There's some bugs in the Annotated Timeline, and it doesn't appear they will be addressed.
Also it is a Flash based chart. A Canvas+Javascript implementation would be more portable.
The qualities that make the Annotated Timeline valuable (as opposed to every other charting library i've found so far) are:
- supports multiple lines
- zooming; to drill in and out of a date range
- panning back and forth through time
- supports thousands of data points
- ability to be fed new data on the fly
As far as i can tell Google's Annotated Timeline is the only interactive line graph library.
‑‑‑‑‑
參考解法
方法 1:
Dygraphs should do exactly what you want, and is a full js implementation. It's free, and already integrates with gviz (sample here), so you should barely need to change anything. It also has a bunch of other useful functionality not found on other gviz charts (like rolling average calculation).
Hope that helps.
方法 2:
I know this question is pretty old but it would save me a lot of time if I knew there was a new ChartRangeFilter api.
https://google‑developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter
方法 3:
On January 29, 2014 Google has made available a new version of such a chart called Annotation Chart. It's pretty cool indeed! Best of all it's free to user wherever you want.
Annotation charts are interactive time series line charts that support annotations. Unlike the annotated timeline, which uses Flash, annotation charts are SVG/VML and should be preferred whenever possible.
Sample:
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1.1', {'packages':['annotationchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler‑22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true,
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div' style='width: 900px; height: 500px;'></div>
</body>
</html>
方法 4:
I just ran into this:
http://www.highcharts.com/demo/dynamic‑master‑detail
It's not free but it looks interesting.
方法 5:
This thread is little old, but SIMILE widgets by MIT are great. They have one for timeline as well. SIMILE Timeline Widget
(by Ian Boyd、oli、headsvk、Leniel Maccaferri、tooshel、karlos)