Google Charts 是一个强大的图表制作工具,可以轻松地将数据转换为交互式的图表。以下是一个简单的示例,展示如何使用 Google Charts 创建图表。

示例:折线图

在这个示例中,我们将使用 Google Charts 创建一个折线图。

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://www.google.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2014',  1000,      400],
        ['2015',  1170,      460],
        ['2016',  660,       1120],
        ['2017',  1030,      540]
      ]);

      var options = {
        title: 'Company Performance',
        curveType: 'function',
        legend: { position: 'bottom' }
      };

      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

在上面的代码中,我们首先加载了 Google Charts 库,然后定义了一个名为 drawChart 的函数,该函数创建了一个折线图。data 数组包含了图表的数据,而 options 对象包含了图表的配置。

如何在网站上嵌入图表

要将 Google Charts 图表嵌入到您的网站中,请按照以下步骤操作:

  1. 将上面的代码复制到您的 HTML 文件中。
  2. <div id="curve_chart" style="width: 900px; height: 500px"></div> 替换为您想要图表显示的位置。
  3. 确保您的 HTML 文件中包含了 Google Charts 库的链接。

折线图示例

进一步学习

如果您想了解更多关于 Google Charts 的信息,请访问我们的开发者教程页面。在那里,您可以找到更多关于不同图表类型的示例和教程。

希望这个示例能帮助您开始使用 Google Charts!🚀