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

猜你喜欢

转载自blog.csdn.net/lanchunhui/article/details/80212508