前端开发 —— google chart 的使用

最新推荐文章于 2024-06-13 09:38:19 发布

五道口纳什

最新推荐文章于 2024-06-13 09:38:19 发布

阅读量7.7k

点赞数

分类专栏：全栈工程师

本文链接：https://blog.csdn.net/lanchunhui/article/details/80212508

版权

全栈工程师专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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)
```

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

五道口纳什

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端开发 —— google chart 的使用

1. 引入所需的 js 库在 &lt;head&gt;&lt;/head&gt;中&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"&gt;&lt;/script&gt;&lt;script type="text/javascript" src="https://
复制链接

扫一扫