Google Charts 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01005/article/details/141048323

Google Charts 开源项目教程

charts项目地址:https://gitcode.com/gh_mirrors/charts1/charts

项目介绍

Google Charts 是一个强大的、简单易用的图表工具库，提供了丰富的交互式图表类型，适用于浏览器和移动设备。该项目完全免费，并且支持广泛的浏览器兼容性和跨平台特性。Google Charts 提供了多种图表类型，从简单的散点图到层次化的树图，用户可以根据需求选择最适合的图表类型。

项目快速启动

安装

首先，你需要将项目克隆到本地：

git clone https://github.com/google/charts.git

使用示例

以下是一个简单的示例，展示如何在网页中使用 Google Charts 绘制一个柱状图：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.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'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  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>