GoogleChart与Highstock数据可视化-优快云博客

本文链接：https://blog.youkuaiyun.com/james521314/article/details/8588061

今天为大家介绍一个数据图像生成插件：Google Chart

举例如下：

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004', 1000,      400],
          ['2005', 1170,      460],
          ['2006', 660,       1120],
          ['2007', 1030,      540]
        ]);

        var options = {
          title: '公司员工表',
          hAxis: {title: '年', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
效果如下：