您的位置:威尼斯官方网站 > 威尼斯正规官网 > 产品很多

产品很多

发布时间:2019-12-30 19:09编辑:威尼斯正规官网浏览(102)

    Google 产品很多,其中有一项服务是 Google 代码。

    Google 代码下有很多产品,其中一项产品就是 AJAX APIs。

    AJAX APIs 下也有很多东西,其中一项东西就是 Google 可视化 API。

    Google 可视化 API,其实就是帮助我们用几句简单的 JavaScript、HTML 等代码,实现复杂的饼图、结构图、表等功能。

    图片 1

    下面用官方的示例代码看一个示例

    <script type="text/javascript" src=";
    <script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['piechart']});

    // Set a callback to run when the 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() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows([
            ['Work', 11],
            ['Eat', 2],
            ['Commute', 2],
            ['Watch TV', 2],
            ['Sleep', 7]
            ]);
        
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
    }
    </script>

    效果

    图片 2

    实际运行一下

    <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="; <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['piechart']}); // Set a callback to run when the 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() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Task'); data.addColumn('number', 'Hours per Day'); data.addRows([ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'}); } </script> </head> <body> <p>(第一次运行时,加载可能需要几秒钟时间,请等等。不行的话,刷新一下。千一网络编辑注)</p> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html>

    [Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

    本文由威尼斯官方网站发布于威尼斯正规官网,转载请注明出处:产品很多

    关键词: