玫瑰图
简介
玫瑰图是在极坐标系下绘制的统计图表,数据中的每个类别被分成相等的部分,每个部分从中心向外延伸的距离取决于它所代表的值。玫瑰图适合展示循环数据(月份、季节等),曾被英国统计学家弗洛伦斯·南丁格尔用来展示克里米亚战争期间士兵的死亡人数。
在 VChart 中,玫瑰图与饼图的区别是饼图用扇区角度范围表示数值的差异而扇区半径保持一致,而玫瑰图用扇区半径表示数值差异而扇区角度范围保持一致。正是不同 半径的扇区才构成了错落有致的“玫瑰花瓣”。
图表构成
玫瑰图由扇区图元及其他组件构成。

扇区图元为玫瑰图的基本要素,相关的绘制配置必不可少:
roseChart.type: 图表类型,饼/环图的类型为'rose'roseChart.data: 图表绘制的数据源roseChart.categoryField: 分类字段,映射不同扇区图元roseChart.valueField: 数值字段,映射图元的扇区半径roseChart.seriesField: 分类字段,映射图元的扇区颜色
坐标轴、提示信息等作为辅助图表展示的组件,属于可选配置,自带默认效果和功能:
roseChart.axes: 坐标轴组件,默认显示并根据图表类型自动推断坐标系及数据映射逻辑,详情配置见VChart 坐标轴组件配置roseChart.tooltip: 提示信息,默认交互时显示,详细配置见VChart 提示信息组件配置- 更多组件配置见VChart roseChart 配置
玫瑰图特性
数据
- 一个
离散字段,如:product,用于映射不同扇区 - 一个
数值字段,如:sales,用于映射扇区半径
一组产品类别和 sales 的数据定义如下:
data: [ { name: 'rose', values: [ { product: '数码产品', sales: 20 }, { product: '日用品', sales: 50 }, { product: '食品', sales: 80 } ] } ];
分组玫瑰图
分组玫瑰图可以看作 '弯曲后的分组柱状图',它将不同类别的玫瑰系列沿着极坐标系以间隔的方式排列在一起,每组玫瑰系列代表一个类别。
在 VChart 中,需要在categoryField中追加字段(此时categoryField以数组形式存在),该字段用于区分数据类别,即对同一维度的玫瑰系列进行拆分,拆分成若干组以间隔排列的方式展开。并且为了区分同一维度下间隔排列的柱子,需要指定roseChart.seriedField字段,该字段默认映射 扇区颜色。
堆叠玫瑰图
堆叠玫瑰图可以看做 '弯曲后的堆叠柱状图',它将不同类别的玫瑰系列以堆叠的方式组合在一起,每组玫瑰系列代表一个类别。
在 VChart 中,如果需要展示堆叠玫瑰图,需要配置roseChart.stack: true, 并且为了区分同一维度下堆叠在一起的扇区,需要指定roseChart.seriedField字段,该字段默认映射扇区颜色。
提示信息等作为辅助图表展示的组件,属于可选配置,自带默认效果和功能:
roseChart.tooltip: 提示信息,默认交互时显示,详细配置见VChart 提示信息组件配置- 更多组件配置见VChart 组件配置