摘要:Google Chart (折線圖)
範例圖:
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', Date);
data.addColumn('number', '造訪流量');
data.addColumn('number', '下載次數');
data.addColumn('number', '按讚次數');
data.addRows(12);
data.setValue(0, 0, '一月');
data.setValue(0, 1, 73);
data.setValue(0, 2, 312);
data.setValue(0, 3, 68);
data.setValue(1, 0, '二月');
data.setValue(1, 1, 99);
data.setValue(1, 2, 13);
data.setValue(1, 3, 67);
data.setValue(2, 0, '三月');
data.setValue(2, 1, 198);
data.setValue(2, 2, 65);
data.setValue(2, 3, 165);
data.setValue(3, 0, '四月');
data.setValue(3, 1, 263);
data.setValue(3, 2, 100);
data.setValue(3, 3, 222);
data.setValue(4, 0, '五月');
data.setValue(4, 1, 100);
data.setValue(4, 2, 33);
data.setValue(4, 3, 99);
data.setValue(5, 0, '六月');
data.setValue(5, 1, 99);
data.setValue(5, 2, 22);
data.setValue(5, 3, 81);
data.setValue(6, 0, '七月');
data.setValue(6, 1, 111);
data.setValue(6, 2, 109);
data.setValue(6, 3, 290);
data.setValue(7, 0, '八月');
data.setValue(7, 1, 43);
data.setValue(7, 2, 87);
data.setValue(7, 3, 14);
data.setValue(8, 0, '九月');
data.setValue(8, 1, 87);
data.setValue(8, 2, 93);
data.setValue(8, 3, 39);
data.setValue(9, 0, '十月');
data.setValue(9, 1, 43);
data.setValue(9, 2, 54);
data.setValue(9, 3, 188);
data.setValue(10, 0, '十一月');
data.setValue(10, 1, 123);
data.setValue(10, 2, 200);
data.setValue(10, 3, 90);
data.setValue(11, 0, '十二月');
data.setValue(11, 1, 55);
data.setValue(11, 2, 77);
data.setValue(11, 3, 99);
var chart = new google.visualization.LineChart(document.getElementById('Div1'));
chart.draw(data, { width:800, height: 600, title: '統計表' });
}
</script>
</head>
<body>
<div id="'Div1'">
</body>