Google Chart 实现报表统计

guangqiang

浏览: 398506 次
性别:
来自: 青岛

最近访客更多访客>>

a450065208

qijojo

李虎强

hlbejy

博主相关

博客

微博

相册

留言

关于我

博客专栏

: wordpress步步高
浏览量：76045

: Web前端开发之路
浏览量：92661

: Flex/ActionSc...
浏览量：63877

: Android/IOS 开...
浏览量：35308

: PHP项目实战
浏览量：24476

文章分类

社区版块

存档分类

博客分类：

JavaScript/Jquery
Html&CSS

jquery chart 报表统计 js

当处理数据或者统计结果的时候通常会遇到一些报表例如饼状图曲线图柱状图

但是实现起来往往不是很简单,现在运用google chart可以很轻松实现你的目的了.

先看个示例吧

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>



  更多内容 请参考我的个人博客http://ismartstudio.com/

查看图片附件

4
顶

1
踩

分享到：

Wordpress第三方 Contact/Feedback 插件 ... | 兼容所有主流浏览器的渐变色背景

2012-10-11 16:16
浏览 2893
评论(5)
分类:Web前端
查看更多

5 楼 guangqiang 2012-10-23

dsjt 写道

 google.load('visualization', '1.0', {'packages':['corechart']});

无法连接互联网咋整？

http://guangqiang.iteye.com/blog/1567532

4 楼 guangqiang 2012-10-23

dsjt 写道

 google.load('visualization', '1.0', {'packages':['corechart']});

无法连接互联网咋整？

实在不行去这个链接找找你想要的方式把....http://guangqiang.iteye.com/blog/1567532

3 楼 guangqiang 2012-10-23

dsjt 写道

 google.load('visualization', '1.0', {'packages':['corechart']});

无法连接互联网咋整？

把这个文件 https://www.google.com/jsapi down下来然后换成本地的js文件 , 然后再引用到你的script代码里即可

<script type="text/javascript" src="localgoogle.js"></script>

2 楼 dsjt 2012-10-23

 google.load('visualization', '1.0', {'packages':['corechart']});

无法连接互联网咋整？

1 楼 king520 2012-10-12

直接JS就可以搞定。真牛叉～

我这边是jfreechart~

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论