zoukankan      html  css  js  c++  java
  • google 饼图

    http://code.google.com/intl/zh-CN/apis/chart/interactive/docs/quick_start.html
    这里还有一个gchart的jquery插件介绍
    http://www.cnblogs.com/JustinYoung/archive/2010/01/18/gchart-google-chart-api-01.html
    <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>

  • 相关阅读:
    wap2app(五)-- 微信授权登录以及踩过的坑
    wap2app(六)-- wap2app的原生标题头无法隐藏
    创建对象的几种模式
    通过url动态获取图片大小方法总结
    wap2app(三)-- 添加引导页
    wap2app(二)-- 设置APP系统状态栏
    wap2app(一)-- 网站快速打包成app
    树叶飘落、雪花飘落等同时多个图片飘落
    基于bootstrap的双日历插件 daterangepicker
    FileProvider解决FileUriExposedException
  • 原文地址:https://www.cnblogs.com/lexus/p/2177992.html
Copyright © 2011-2022 走看看