Skip to main content

BI Awesome

可视化

  • 基础图形
    • 折线图、区域图
    • 饼图、叠加饼图
    • 柱状图
    • 散点图
  • 扩展图形
    • 饼图
      • 旭日图
      • Percentage Charts - 展开的水平饼图 - 子弹图
      • Radial Bar Chart - 放射饼图
      • 进度环图
      • 玫瑰图
      • 玉珏图
    • 条形图
      • 对称条形图
    • 柱状图
      • Histogram - 直方图
      • 对称条形图
    • sankey chart - 桑基图
    • PolarAxis - 极坐标
    • BoxPlot - 箱形图
      • 最大值、最小值、中位数、及上下四分位数
    • Heatmap - 热力图
    • Calendar - 日历图
    • Treemap - 矩形树图
    • Funnel Chart - 漏斗图
    • RadarChart - 雷达图
    • Candlestick chart - K 线图
      • 阳线 - 红 - 香港&欧美 为 绿 - 收盘价 > 开盘价
      • 阴线 - 绿 - 香港&欧美 为 红 - 收盘价 < 开盘价
      • 中立线 - 收盘价 = 开盘价
      • 实体 - 粗 - 收盘价, 开盘价
      • 影线 - 细 - 最高价, 最低价
      • K 线组合出来的图为 K 线图
    • ErrorBar - 误差棒
      • 统计 standard deviation, standard error,
    • Voronoi Diagram - 维诺图, 沃罗诺伊图
      • 空间切分
    • 气泡图
    • Chord - 弦图
    • 密度热力图
    • 瀑布图
    • 词云图
    • violin plot - 小提琴图
    • 韦恩图
    • Circle Packing
    • 分面图
    • Gantt - 甘特图 - Ranged Bar Marks
  • 选择考量标准
    • SVG/Canvas
    • Bundle 大小 - 有的框架动不动就上 MB
      • treeshake
      • 依赖复用 - 例如 d3, react-spring, lodash, lodash-es
    • 图类型 - 2D, 3D, Geo, 基础, 高级
    • 基于框架 - 更容易自定义, 更好处理事件、渲染
      • React 对 SVG 有天生优势
    • 基于 JSON 定义 - plotly, vega, apexcharts
      • 更适合 Editor 场景 - 方便保存复现
      • 跨语言框架
    • 基于 D3 - 基础逻辑通用 - bundle 复用
      • 即便不基于 D3 的也可能会用 D3 的基础库
      • d3-shape, d3-hierarchy, d3-path
      • d3-scale, d3-scale-chromatic, d3-array, d3-format, d3-time-format, d3-time, d3-interpolate
      • d3-color
    • 依赖
      • lodash, lodash-es, react-spring
    • 其他功能
      • BI, 透视/Pivot, crossfilter, crosshair, 动画
      • 交互: 拖拉、选择,平滑
    • 可组合使用
      • 例如 BI 时使用 plotly 这种,table 或 其他自定义显示时使用 recharts

React


Declarative

Declarative 类型的图和框架一般结合不太好 - 例如: 不方便直接渲染 React, 只能使用 DOM




dashboard

tip
  • 自定义 Dashboard 带 Builder 性质
    • 有些特性和 BlockBuilder、PageBuilder 类似
    • 序列化
  • 基础大多基于 react-grid-layout

ML