# tsVisualData

**Repository Path**: lp9906/ts-visual-data

## Basic Information

- **Project Name**: tsVisualData
- **Description**: ts canvas 数据可视化
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-24
- **Last Updated**: 2022-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Canvas

## README

# tsVisualData 数据可视化

## 配置文件

可以下载保存配置至 JSON 文件

- sortEveryFrame 排序每一帧

- sortDate 排序日期

- dataStack 数值叠加

- DateReverse 日期反序

- ValueReverse 数值反序

- YReverse Y 轴反序

- drawRevese 绘制优先级反序

- showFps 显示帧数

- axisSemilogarithmicX 反半对数坐标轴

- nameInLeft 名称在左边

- iconShow 显示图标

- iconRound 图标为圆形

- charset 读取 csv 文件编码(目前只能 GBK)

- backgroundColor 背景颜色

- backgroundImageUrl 背景图片地址

- nameColor 名称颜色

- valueColor 数值颜色

- splitLineColor 分割线颜色

- splitValueColor 分割值颜色

- dateColor 日期颜色

- fpsColor 帧数颜色

- padding 边距

- rectPadding 数值条边距

- splitFontHeight 分割线文本高度

- namePadding 名称边距

- valueLeftPadding 数值左边距

- iconRightPadding 图标右边距

- topIconPadding 榜首图标边距

- fpsFontSize 帧数字体大小

- valueFrame 数据变化帧数

- yFrame Y 轴变化帧数

- splitLineFrame 分割线变化帧数

- fpsRefresh fps 刷新毫秒

- firstIndx 要显示第一项

- maxLength 最大显示数

- minRate 最小值率(1-4)

- splitLineWidth 分割线条宽度

- splitLineCount 分割线最大数量

- splitLineValue 分割线基础值

- splitLineUnit 分割线递增单位

- transitionY Y 轴运动

- transitionValue 数值运动

- transitionSplitLine 分割线运动

- formatName 名称格式化公式

- formatValue 数值格式化公式

- formatSplitValue 分割数值格式化公式

## 工具类

- utils 基础工具

  - CanvasUtils 画板工具

    - 扩展方法，定义类型，对画板基础进行简化，归于一类

  - FileUtils 文件工具

    - 读取、处理文件

  - GradualNumber 过渡计算工具

    - 计算一个数从当前值，根据过渡次数、过渡方式，过渡到目标值的工具

    - LineChanger 匀速过渡

    - BezierChanger 三次贝塞尔过渡

  - RemoveList 列表工具

    - 存入列表时返回函数，运行即可让选项离开列表

  - RemoveSaveList 列表绑定对象工具

    - 列表存入数据与绑定对象时返回函数，运行即可让选项离开列表

  - TransitionList 列表进出工具

    - 有序传入数据组，进入范围内为新增，离开范围内为离开，于范围内位置发生变化为更新

  - TransitionSelectList 列表区间进出工具

    - 有序传入数据组，由上进入范围内为上新增，由下进入范围内为下新增，由上离开范围内为上离开，由下离开范围内为下离开，于范围内位置发生变化为更新

  - WatchValue 监视变化工具

    - 对象 Value 保存为数据，如数据发生变化则触发执行绑定的函数

  - WatchNumber 监视数值工具

    - 监视数值变化触发执行绑定函数

  - WatchGradualNumber 监视过渡工具

    - 监视数值变化，触发过渡时内容会按过渡方式往目标值进行过渡，过渡过程中触发执行绑定函数

  - WatchBlock 监视块级工具

    - 模仿 HTML 界面大小与位置计算，当元素或子元素 Style 样式或 Children 子元素发生变化时，重新计算所有相关链元素的位置与大小

    - Space 占用空间

    - Client 元素所在空间

    - Content 元素内容空间

    - Childrens 元素的子元素

    - Style 元素样式

      - Direction 子元素布局方向
      - Width 元素宽度
      - Height 元素高度
      - Padding 元素内边距
      - PaddingTop 元素上内边距
      - PaddingRight 元素右内边距
      - PaddingBottom 元素下内边距
      - PaddingLeft 元素左内边距
      - Position 定位方式
      - Top 上定位
      - Right 右定位
      - Bottom 下定位
      - Left 左定位
      - Align 子元素对齐方式

  - FpsUtils 帧数计算工具

    - 计算渲染画面时的帧数

  - MyArray 数组扩展工具

  - PlayController 播放控制工具

    - 控制画板(canvas)执行绑定的函数

- visual utils 可视化工具

  - ConfigUtils 配置管理工具

    - FormatString 文字格式化工具

    - Semilogarithmic 反对数坐标轴计算工具

    - SplitNumber 分割线计算工具

  - SplitUtils 分割线绘制类

  - BarUtils 数据绘制类

  - DataUtils 数据格式化类

  - PositionUtils 进度管理类

  - ViewUtils 界面绘制类

  - view 绘制基础类

    - 即将使用 WatchBlock 作为基类，来计算元素位置

    - ImageView 图片绘制类

    - LineView 线条绘制类

    - RectView 矩形绘制类

    - StringView 文字绘制类