前端开发 —— google chart 的使用
钱展
1. 引入所需的 js 库
在
<head></head>中<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={ 'modules':[{ 'name':'visualization', 'version':'1', 'packages':['corechart'] }] }"></script>
2. 简单绘制 line
<html>
<body>
<div id="chart" style="width: 800px; height: 600px"></div>
<script type="text/javascript">
....
</script>
</body>
</html>作用在某 div 元素上：
var chart = new google.visualization.LineChart($('chart')[0]);表格选项：
var options = { title: 'Temperature', curveType: 'function', animation: { duration: 1000, easing: 'in' }, legend: { position: 'bottom' } }存储二维数组的 DataTable
var data = google.visualization.arrayToDataTable([ ['Time', 'Temperature'], [new Date().toLocaleTimeString(), 0] ]);绘制：
chart.draw(data, options)
类似资料：