【亲测免费】 Google Charts 安装与配置完全指南

2026-01-21 04:46:49作者：吴年前Myrtle

项目基础介绍及主要编程语言

Google Charts 是一个强大的图表绘制库，它允许开发者在Web应用中轻松创建各式各样的交互式图表。这个开源项目尤其适合那些希望快速集成数据可视化功能的开发者。尽管其名称带有“google”，但请注意，此项目不再是官方维护，而是作为社区维护的分支存在。项目的主要编程语言是JavaScript，这意味着它可以无缝集成到任何基于HTML和JavaScript的项目中。此外，还有针对Flutter平台的dart语言版本，位于 charts_flutter 子项目中。

项目使用的关键技术和框架

JavaScript: 作为前端图表展示的核心，Google Charts利用JavaScript实现在浏览器端的数据渲染。
HTML5 Canvas: 大多数图表依赖于HTML5的Canvas元素来绘制图形，确保了高性能的图形渲染。
Web Standards: 遵循现代Web标准，兼容各类浏览器，便于跨平台部署。
Flutter SDK (针对charts_flutter): 对于移动开发，通过Dart语言和Flutter框架的支持，使得在Android和iOS上的数据可视化成为可能。

项目安装和配置的准备工作及详细步骤

一、准备环境

Node.js: 确保你的开发环境中安装了Node.js，这将用于管理项目依赖。
Git: 使用Git来克隆项目仓库或管理版本。

二、安装Google Charts JavaScript库

直接引入方式：

在你的HTML文件中直接加入Google Charts库的URL：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

使用npm（对于构建系统项目）：

打开终端或命令提示符。
在你的项目目录下，运行以下命令安装Google Charts库：
```
npm install google-charts --save
```

三、配置和基本使用

加载图表API：若使用直接引入的方式，不需要额外配置，直接在脚本中调用即可。若通过npm安装，则需在你的JavaScript文件中先初始化加载器：

import { load } from 'google-charts';
load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 图表绘制逻辑放在这里
}

简单的图表示例：创建一个基本柱状图的例子，你需要在drawChart函数内部添加如下代码：

var data = google.visualization.arrayToDataTable([
  ['任务', '完成'],
  ['任务A', 11],
  ['任务B', 12],
  ['任务C', 13]
]);

var options = {
  title: '任务进度'
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

不要忘了在HTML中预留图表显示的区域：

<div id="chart_div" style="width: 900px; height: 500px;"></div>

四、配置Flutter环境（对于charts_flutter）

添加依赖到pubspec.yaml：
```
dependencies:
  charts_flutter: ^latest_version
```
替换latest_version为你实际查询得到的最新版本号。
运行flutter pub get以下载并安装包。

示例代码段，导入并在Fluter widget中使用图表：

import 'package:charts_flutter/flutter.dart' as charts;

class MyChartWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<charts.Series<MyData, String>> seriesList = [
      charts.Series<MyData, String>(
        id: 'Data',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (MyData d, _) => d.xValue,
        measureFn: (MyData d, _) => d.yValue,
        data: [
          MyData('A', 1),
          MyData('B', 5),
          MyData('C', 3),
        ],
      ),
    ];

    return charts.BarChart(
      seriesList,
      animate: true,
    );
  }
}

class MyData {
  final String xValue;
  final int yValue;

  MyData(this.xValue, this.yValue);
}