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 图表嵌入到您的网站中,请按照以下步骤操作:
- 将上面的代码复制到您的 HTML 文件中。
- 将
<div id="curve_chart" style="width: 900px; height: 500px"></div>
替换为您想要图表显示的位置。 - 确保您的 HTML 文件中包含了 Google Charts 库的链接。
折线图示例
进一步学习
如果您想了解更多关于 Google Charts 的信息,请访问我们的开发者教程页面。在那里,您可以找到更多关于不同图表类型的示例和教程。
希望这个示例能帮助您开始使用 Google Charts!🚀