为了重构,我调研了市面上的可视化方案

为了重构,我调研了市面上的可视化方案

gio有个可视化方案,它构建于G2,与React封装在一起。之前的同事想法是想在这一套可视化方案中,希望通过配置文件绘制出配置文件里面的图。但可惜的是在绘图部分抽象不够好,导致在绘图部分的代码量较大,维护困难。在今年也看到有些视频分享值得我去学习和思考的。

在经过一段时间的调研后,看到下面基于React做渲染的方案是不错的

  1. BizChart,阿里开源的g2 + react可视化方案
  2. Recharts,开源社区canvas + svg + d3.js + react可视化方案
  3. react-vis, Uber开源的canvas + svg + d3.js + react

BizChart与Recharts的架构类似

BizChart架构图

BizChart是根据React的children中的type去索引到processor中,processor是专门处理g2的绘图部分。根据children的props传递到processor,绘制不同类型的图

BizChart架构图

Recharts架构图

Recharts比较有意思的是generateCategoricalChart是一个高阶组件,抽象出公共的逻辑,根据导出的BarChart、AreaChart中的children去拼接line、bar、axis,形成一个完整的图行。

<LineChart width={600} height={300} data={data}>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<CartesianGrid stroke="#ccc" />
<XAxis dataKey="name" />
<YAxis />
</LineChart>

Recharts架构图

react-vis架构图

react-vis从开源代码结构来看,是属于比较松散型,即在Plot中定义Line、Bar、Axis等组件。在plot中,react-vis还定义了series,这个主要是图表的组装工厂,里面的图表都是继承于AbstractSeries。AbstractSeries主要提供了DOM的事件监听:click、mouseMove、touch等事件处理。

<XYPlot height={200} width={200}
colorType="category"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<VerticalBarSeries data={series1} color={0} />
<VerticalBarSeries data={series2} color={1} />
<VerticalBarSeries data={series3} color={2} />
</XYPlot>

react-vis架构图

总结

在上述的三个可视化库中除了Bizchart是以g2为内核之外,其余两个都是使用的d3+react。在g2源码中,g2继承EventEmitter,所以Bizchart在模块化上使用react component type去区分g2 component。而recharts则是通过高阶组件抽象出绘图逻辑。在react-vis中,则是以继承的方式去构建一个事件处理的wrapper,每一个series chart都有自己的绘图逻辑。

文章作者: 韦宗圻
文章链接: https://www.weizongqi.com/2018/11/13/为了重构,我调研了市面上的可视化方案/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 wiki
支付宝打赏
微信打赏