Trên January 29, 2014 Google đã cung cấp phiên bản mới của biểu đồ như vậy gọi là Annotation Chart. Nó thực sự rất tuyệt! Hay nhất của tất cả nó là miễn phí cho người dùng bất cứ nơi nào bạn muốn.
Biểu đồ chú thích là biểu đồ dòng thời gian tương tác hỗ trợ các chú thích . Không giống như dòng thời gian được chú thích, sử dụng biểu đồ Flash, chú thích là SVG/VML và nên được ưu tiên bất cứ khi nào có thể.
mẫu:
<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>
cũng liên quan: http://stackoverflow.com/questions/2109780/non-clunky-client-side-graphs http://stackoverflow.com/questions/437686/is-there-a-client-side-javascript -graph-library-that-doesnt-require-a-server? rq = 1 – trante