!!!###!!!title=玫瑰图——VisActor/VChart 教程文档!!!###!!!!!!###!!!description=[\[配置项\]](../../../option/roseChart)!!!###!!!

玫瑰图

[配置项]

简介

玫瑰图是在极坐标系下绘制的统计图表,数据中的每个类别被分成相等的部分,每个部分从中心向外延伸的距离取决于它所代表的值。玫瑰图适合展示循环数据(月份、季节等),曾被英国统计学家弗洛伦斯·南丁格尔用来展示克里米亚战争期间士兵的死亡人数。

在 VChart 中,玫瑰图与饼图的区别是饼图用扇区角度范围表示数值的差异而扇区半径保持一致,而玫瑰图用扇区半径表示数值差异而扇区角度范围保持一致。正是不同半径的扇区才构成了错落有致的“玫瑰花瓣”。

图表构成

玫瑰图由扇区图元及其他组件构成。

扇区图元为玫瑰图的基本要素,相关的绘制配置必不可少:

  • roseChart.type: 图表类型,饼/环图的类型为'rose'
  • roseChart.data: 图表绘制的数据源
  • roseChart.categoryField: 分类字段,映射不同扇区图元
  • roseChart.valueField: 数值字段,映射图元的扇区半径
  • roseChart.seriesField: 分类字段,映射图元的扇区颜色

坐标轴、提示信息等作为辅助图表展示的组件,属于可选配置,自带默认效果和功能:

玫瑰图特性

数据

  • 一个离散 字段,如: 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字段,该字段默认映射扇区颜色。

提示信息等作为辅助图表展示的组件,属于可选配置,自带默认效果和功能: