Google Chart 开源项目使用教程

劳婵绚Shirley

于 2024-08-25 09:28:18 发布

阅读量254

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00233/article/details/141522335

版权

Google Chart 开源项目使用教程

google-chartGoogle Charts API web components项目地址:https://gitcode.com/gh_mirrors/go/google-chart

1. 项目的目录结构及介绍

Google Chart 项目的目录结构如下：

google-chart/
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── bower.json
├── demo/
│   ├── demo.css
│   ├── demo.html
│   └── demo.js
├── google-chart.html
├── index.html
├── package.json
└── test/
    ├── google-chart_test.html
    └── index.html

目录结构介绍

CONTRIBUTING.md: 贡献指南文件。
LICENSE: 项目许可证文件。
README.md: 项目说明文件。
bower.json: Bower 包管理配置文件。
demo/: 示例目录，包含示例代码和样式。
- demo.css: 示例样式文件。
- demo.html: 示例 HTML 文件。
- demo.js: 示例 JavaScript 文件。
google-chart.html: 项目主文件，定义了 Google Chart 组件。
index.html: 项目入口文件。
package.json: npm 包管理配置文件。
test/: 测试目录，包含测试文件。
- google-chart_test.html: 测试文件。
- index.html: 测试入口文件。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它作为项目的入口文件，负责加载和展示 Google Chart 组件。

index.html 文件内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Google Chart</title>
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="google-chart.html">
</head>
<body>
  <google-chart type="bar" data="[[data]]" options="[[options]]"></google-chart>
  <script>
    var data = [
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ];
    var options = {
      title: 'Popularity of Types of Music',
      width: 800,
      height: 600
    };
  </script>
</body>
</html>

启动文件介绍

引入了 webcomponents-lite.js 以支持 Web Components。
通过 <link rel="import" href="google-chart.html"> 引入了 Google Chart 组件。
在 <body> 中定义了一个 <google-chart> 元素，并设置了 type、data 和 options 属性。
通过内联脚本定义了 data 和 options 变量，用于配置图表数据和选项。

3. 项目的配置文件介绍

项目的配置文件主要包括 bower.json 和 package.json。

bower.json 文件内容

{
  "name": "google-chart",
  "version": "1.1.2",
  "description": "Google Chart Web Component",
  "authors": [
    "The Polymer Authors"
  ],
  "keywords": [
    "web-component",
    "web-components",
    "polymer",
    "google",
    "chart",
    "charts"
  ],
  "main": "google-chart.html",
  "license": "http://polymer.github.io/LICENSE.txt",
  "homepage": "https://github.com/GoogleWebComponents/google-chart/",
  "ignore": [
    "/.*",
    "/test/",
    "/demo/"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#^1.7.0",
    "google-apis": "GoogleWebComponents/google-apis#^1.1.0"
  },
  "devDependencies": {
    "iron-component-page

google-chartGoogle Charts API web components项目地址:https://gitcode.com/gh_mirrors/go/google-chart