前端开发 —— google chart 的使用

时间：2021-07-17 19:50:25

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)

相关文章