谷歌的Annotated Timeline可视化API还有其他选择吗?
There's some bugs in the Annotated Timeline,似乎没有解决这些问题。
此外,它还是基于 Flash 的图表。 Canvas + Javascript实现更加便携。
使带注释的时间轴有价值的品质(与我迄今为止发现的所有其他图表库相对)是:
据我所知,Google的Annotated Timeline是唯一的交互式折线图库。
答案 0 :(得分:20)
Dygraphs应该完全符合您的要求,并且是完整的js实现。它是免费的,已经integrates with gviz(sample here),所以你几乎不需要改变任何东西。它还有许多其他gviz图表中没有的有用功能(如滚动平均值计算)。
希望有所帮助。
答案 1 :(得分:5)
我知道这个问题已经很久了,但如果我知道有一个新的ChartRangeFilter
api,它会省去很多时间。
https://google-developers.appspot.com/chart/interactive/docs/gallery/controls#chartrangefilter
答案 2 :(得分:3)
在January 29, 2014上,Google提供了一个名为Annotation Chart
的此类图表的新版本。确实非常酷!最重要的是,无论你想要什么,它都是免费的。
注释图表是支持的交互式时间序列折线图 注释。与使用Flash的带注释的时间轴不同, 注释图表是SVG / VML,无论何时都应该是首选 可能的。
样品:
<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>
答案 3 :(得分:2)
答案 4 :(得分:2)
这个帖子有点老了,麻省理工学院的SIMILE小部件很棒。他们也有一个时间表。 SIMILE Timeline Widget
答案 5 :(得分:2)
院子里有一个新项目(是的,我是那里的开发商之一),这可能是您的最佳选择:
Data Visualization Software Lab
该库纯粹基于HTML5且非常具有交互性 - 尝试演示。它也是Mobile优化的,因此您可以在任何设备上使用它。
目前,图书馆处于测试阶段并处于积极发展阶段。很快就会有更多功能。强烈建议您提供任何反馈意见。还有大量文档和使用示例。外部控制的API也存在。
提供双重许可。
快照:
答案 6 :(得分:1)
经过广泛研究以取代Google注释时间表后,我认为HighChart StockChart是最全面的。 如上所述,它不是开源的,也不是免费的,但根据我的说法可以负担得起。
答案 7 :(得分:1)
如果您不需要注释但只需要取景器功能,请尝试NVD3.js。
答案 8 :(得分:0)
试试c3js 它完全自由,轻便且易于使用。