好大的一个头

GitHub地址：https://github.com/janwool/xchart/tree/master欢迎Star目录【实现自己的可视化引擎01】认识Canvas【实现自己的可视化框架引擎02】

柱形图，又称长条图，是一种以长方形的长度为变量的统计图表。长条图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。效果图如下： 由上面效果图可以看出，我们柱状图有两种类型，一种是所有数据数值都大于0，另一种数据中有大于0同时存在小于0的…

条形图使用水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。效果图如图所示： 从效果图上可以看出，条形图由不同的长方形组合而成。其算法如下： 绘制长方形，并加入图层。 React封装需要DOM的挂载完成，所以我们在生命周期compone…

仪表盘(Gauge)是一种拟物化的图表，刻度表示度量，指针表示维度，指针角度表示数值。仪表盘图表就像汽车的速度表一样，有一个圆形的表盘及相应的刻度，有一个指针指向当前数值。 有效果图可以看出，仪表盘图层可以有几个简单的基本图层圆环(圆弧)Ring、三角形指针(多边形Polygo…

大数据可视化不可绕开的图表便是地图。本章节，我们将简单实现一个完整的中国地图以及简单的交互，并封装成React组件。效果图如下： 地图图层的实现其实很简单，由效果图可以看出，地图由多个多变形拼接组成，所以我们只需计算出各个省市边界的相应坐标，几个绘制地图。 这里我们只需将各个省…

关系图又叫结构拓扑图，由各个网络节点相互连接形成的网络图谱。其效果图如下： 数据由两部分组成，roles定义各个节点的描述,relation为各个节点间的关联关系值。 从效果图上可以看出，拓扑图层由Text、Circle、Line这些组件依据数据关系组合而成。当我们新建拓扑图层…

烛形图主要用于金融领域里展示股票，期货等交易数据，按照时间维度分为日 K 线、周 K 线、月 K 线。展示的数据需要满足 K 线构成的四要素：即开盘价、收盘价、最高价、最低价。 从效果图上，我们可以把该组件拆分成坐标图层与K线图层。而K线图层又是由多根烛型图元依次摆列而成，所以…

雷达图是以相同点开始的轴上表示的三个或更多个定量变量的二维图形的形式显示多变量数据的图形方法。效果图如下： 雷达图通过传入数据对象数组，数据对象label为雷达图坐标系标签，其余属性为该坐标系上该属性的数值。 从效果图上看，我们可以把雷达图分成两部分：坐标系与数据层。 坐标层由…

散点图也叫 X-Y 图，它将所有的数据以点的形式展现在笛卡尔坐标系上，以显示变量之间的相互影响程度，点的位置由变量的数值决定。假设我们向要将男女生的升高体重展示在散点图上，数据格式如下： 散点图的实现相对其他图表比较简单，散点图只需要计算两个属性在相应坐标轴的位置上即可确定该坐…