Epoch 构建漂亮/平滑和高性能的可视化图形图表 - 文章教程

Epoch 构建漂亮/平滑和高性能的可视化图形图表

发布于 2020-04-19 字数 6342 浏览 1383 评论 0

Epoch 是一个通用的实时的图表库,用于构建漂亮、平滑和高性能的可视化图形图表。Epoch 提供多种基本图表和专业图表。Epoch 依赖于 jQuery 和 D3.js。

Epoch 构建漂亮/平滑和高性能的可视化图形图表

Epoch 是应用程序开发人员和可视化设计人员的通用图表库。它侧重于可视化编程的两个不同方面:基本图表用于创建历史报告,以及实时图表用于显示频繁更新的 TimeSeries 数据。

特点

为开发人员建造的

Epoch 构建漂亮/平滑和高性能的可视化图形图表

构建时考虑到了开发人员,使其易于扩展和调整图表以适应您的特定领域。

实时绘图

Epoch 构建漂亮/平滑和高性能的可视化图形图表

功能五美丽和高性能实时图表建立使用d3和画布。

统一造型

Epoch 构建漂亮/平滑和高性能的可视化图形图表

CSS 查询引擎允许您使用单个样式表对 SVG和 Canvas 绘图进行样式化。

安装

可以通过以下包管理器轻松安装Epoch:

如果您在上面的列表中没有看到您最喜欢的包管理器,请提交 issues 让我们知道。

重要:Epoch 要求 D3。为了正常工作,您的页面必须在载入 Epoch 之前加载 d3。

公共 CDN 网址

如果您不想自己保存文件,可以使用 jsDelivr 送达档案:

  1. 参观jsDelvr上的EIRCH页面.
  2. 复制提供的URL并在项目中链接到它们。

开发 Epoch

开发 Epoch 是一个相当直截了当的过程。在本节中,我们将详细介绍如何开发 Epoch 的基本知识,详细介绍常见的构建任务,探索如何安排源代码,最后展示如何使用呈现测试来帮助开发。

配置开发环境

Epoch 的开发需要以下条件:

  1. Node.js v4.1.1+
  2. NPM v2.1.0+

一旦这两种设备都安装在您的计算机上,您就需要运行 npm install 从存储库的根目录中安装开发时代所需的 NPM 包。

一旦安装了所需的NPM包,就可以使用 gulp build 若要完全重新构建源,请参阅下面有关 gulp 任务的详细信息。

基本开发过程

开始为时代做出贡献的最佳方法是遵循以下步骤:

  1. 更改为项目的源目录。
  2. 运行 gulp watch 在源文件更改后重新编译项目
  3. 对源文件进行更改(在 src/ 或 sass/ )
  4. 在 web 浏览器中,打开 test/index.html 并浏览呈现测试。
  5. 使用呈现测试来查看您的更改是否具有所需的结果。
  6. 使用PASS确保单元测试 npm test

测试

Epoch 使用两种类型的测试来确保更改不会造成意外的副作用。第一,单元测试,确保库的核心功能组件按预期工作。第二种是呈现测试,允许您确保图表和图形的正确呈现。

保持单元测试和呈现测试都是最新的,这是很重要的!在开发时,使用以下指导方针:

  • 添加新功能时,请确保添加新测试。
  • 更改现有功能时,请确保适当的两种类型的测试仍然通过。
  • 如果您想要创建一个新类型的图表,为该图表添加一个全新的测试套件!

保持测试的最新状态使其他人更容易检查您的代码并发现问题。另外,在没有适当测试的情况下,拉请求也不会合并。

gulp 任务

Epoch 使用 gulp 执行各种任务。这个 gulpfile.js 文件定义以下任务:

  • gulp clean-清洁dist/目录。
  • gulp build-将CoffeeScript和Sass源构建到dist/目录。
  • gulp watch-启动一个监视脚本,在任何文件更改时重新编译CoffeeScript和Sass。

源码结构

Epoch 项目的目录结构遵循一些基本准则,这里概述了它的结构:

dist/                  - Compiled JavaScript and CSS source
src/                   - Main source directory
  core/                - Core Epoch Library Files
    util.coffee        - Library Utility Routines
    d3.coffee          - d3 Extensions
    format.coffee      - Data formatters
    chart.coffee       - Base Chart Classes
    css.coffee         - CSS Querying Engine
  adapters/            - 3rd Party Library Adapters (currently only jQuery)
  basic/               - Basic Chart Classes
  time/                - Real-time Chart Classes
  adapters.coffee      - Options / Global Classes for Adapter Implementations
  basic.coffee         - Base Classes for Basic Charts
  data.coffee          - Data Formatting
  epoch.coffee         - Main source file, defines name spaces, etc.
  model.coffee         - Data Model
  time.coffee          - Base Classes for Real-Time Charts
sass/                  - Scss source for the default epoch stylesheet
tests/
  render/              - Rendering tests
    basic/             - Basic chart rendering tests
    real-time/         - Real-time rendering tests
  unit/                - Unit tests

提交代码

  • 运行 npm test 确保所有测试通过
  • 运行 npm version [major|minor|patch]
  • 运行 npm publish
  • 更新 CHANGELOG.md 自上次发布以来的更改
  • 更新 gh-pages 分支库版本 _config.yml

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0