Google Earth Engine（GEE）——图表概述1

最新推荐文章于 2023-08-27 09:30:00 发布

此星光明

最新推荐文章于 2023-08-27 09:30:00 发布

阅读量645

点赞数

分类专栏： GEE—图表专项文章标签： javascript html5 android GEE chart

本文链接：https://blog.csdn.net/qq_31988139/article/details/119917810

版权

GEE—图表专项专栏收录该内容

31 篇文章 19 订阅

订阅专栏

使用谷歌图表

Google Charts 提供了一种完美的方式来可视化您网站上的数据。从简单的折线图到复杂的分层树图，图表库提供了大量即用型图表类型。

使用 Google Charts 的最常见方法是使用嵌入在网页中的简单 JavaScript。您加载一些 Google Chart 库，列出要绘制图表的数据，选择自定义图表的选项，最后使用您选择的id创建一个图表对象。然后，稍后在网页中，您使用该ID创建一个<div>以显示 Google 图表。

图表作为 JavaScript 类公开，Google Charts 提供了许多图表类型供您使用。默认外观通常就是您所需要的，您始终可以自定义图表以适合您网站的外观。图表具有高度交互性并公开事件，让您可以将它们连接起来以创建复杂的仪表板或与您的网页集成的其他体验 . 图表使用 HTML5/SVG 技术呈现，以提供跨浏览器兼容性（包括用于旧 IE 版本的 VML）和跨平台移植到 iPhone、iPad 和 Android。您的用户永远不必弄乱插件或任何软件。如果他们有网络浏览器，他们就可以看到您的图表。

所有图表类型都使用DataTable类填充数据，从而在您尝试找到理想外观时轻松地在图表类型之间切换。DataTable 提供排序、修改和过滤数据的方法，并且可以直接从您的网页、数据库或任何支持图表工具数据源协议的数据提供者填充。（该协议包括类似 SQL 的查询语言，由 Google Spreadsheets、Google Fusion Tables 和第三方数据提供商（如 SalesForce）实现。您甚至可以在自己的网站上实现该协议并成为其他服务的数据提供商。）

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

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

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.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>