前端开发 —— 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=" 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)
```

相关阅读:
C++(封装一)
数据结构之链式栈（二）
C++(函数重载二)
不计算阶乘获得结果末尾0的个数
附加产品
刘子闻讲的高精度【太强了】
字符串相关函数
回文素数
蛇形填数
筛法模版

原文地址：https://www.cnblogs.com/mtcnn/p/9420988.html