zoukankan      html  css  js  c++  java
  • 前端开发 —— 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)
  • 相关阅读:
    Ensp模拟OSPF与ACL综合应用
    ENSP配置NAT
    Ensp配置RSTP
    EnspOSPF单区域配置
    Ensp配置静态路由和默认路由
    NotPron国外版
    MSF
    转换流
    梦之光芒1-14关通关秘籍
    php序列化与反序列化
  • 原文地址:https://www.cnblogs.com/mtcnn/p/9420988.html
Copyright © 2011-2022 走看看