@visactor/chart-advisor

推荐模块接口

如何使用

chartAdvisor(originDataset: DataItem[], dimensionList:Field[], measureList:Field[], aliasMap: AliasMap)

输入数据集和维度、指标字段信息，返回当前推荐的图表类型以及字段分配

示例

 const dataset=[{ "210816110721021": "家具", "210816110721022": "14138" }, { "210816110721021": "办公用品", "210816110721022": "34611" }, { "210816110721021": "技术", "210816110721022": "12637" }]

 const dimensionList=[{ "uniqueId": 210816110721021, "type": "textual" }]

 const measureList=[{ "uniqueId": 210816110721022, "type": "numerical" }]

 const aliasMap={ "210816110721021": "类别", "210816110721022": "数量" }

 const result = advisor.calAdvisedChart(dataset, dimensionList, measureList, aliasMap)

 console.log(result)

以上代码输出为：

{
 chartType: 'column',
 cell: [
   {
     x: ['210816110721021'],
     y: ['210816110721022'],
     row: [],
     column: [],
     color: [],
     size: [],
     angle: []
   }
 ],
 colorItems: [],
 dataset: [[[[{"210816110721021":"家具","210816110721022":"14138"},{"210816110721021":"办公用品","210816110721022":"34611"},{"210816110721021":"技术","210816110721022":"12637"}]]]],
 aliasMap: { '210816110721021': '类别', '210816110721022': '数量' }
}

以上数据可直接用于生成 vizData

最后生成的图表为：

参数说明:

originDataset: 原始的数据集，是一个 list，里面每个元素是 DataItem，代表一行数据，格式为{uniqueID1: value1, uniqueID2: value2, ...}，其中 uniqueID 为字段的 id，value 为该行数据在该字段上的值

type DataItem = {
[key: number]: string
}

dimensionList: 维度信息集合，是一个 list，里面每个元素是 Field measureList：指标信息集合，是一个 list，里面每个元素是 Field

type Field={
uniqueId: number; //该字段的id
type: string; //该字段的类型（number，string，date)
}

alisMap: 字段别名表，与 vizData 中的 aliasMap 一致

type AliasMap = {
  [key: number]: string;
};

返回值：

返回 AdviseResult。目前支持的图表类型列在了 ChartType 中

type AdviseResult={
chartType: ChartType; //vizData中的chartType
cell:Cell; //vizData中的cell,
colorItems:[] //vizData中的colorItems
dataset: DataItem[]; //处理后的dataset，用于生成vizData
aliasMap: AliasMap; //处理后的字段别名表，用于生成vizData
}

各类型说明：

enum ChartType {
  /** 表格 */
  TABLE = 'table',

  /** 柱状图 */
  COLUMN = 'column',
  /** 百分比柱状图 */
  COLUMN_PERCENT = 'column_percent',
  /** 并列柱状图 */
  COLUMN_PARALLEL = 'column_parallel',

  /** 折线图 */
  LINE = 'line',

  /** 饼图 */
  PIE = 'pie',

  /** 散点图 */
  SCATTER = 'scatter',

  /** 组合柱状图 */
  COMBINECOLUMN = 'combineColumn', //多个柱状图组成的组合图

    /** 组合z折线图 */
  COMBINELINE = 'combineLine', //多个折线图组成的组合图

  /** 指标卡 */
  MEASURE_CARD = 'measure_card',

  /** 词云 */
  WORD_CLOUD = 'word_cloud',

}

interface Cell {
  column?: UniqueId[];
  row?: UniqueId[];
  x?: UniqueId[];
  y?: UniqueId[];
  group?: UniqueId[];
  color?: UniqueId[];
  size?: UniqueId[];
  shape?: UniqueId[];
  angle?: UniqueId[];
  radius?: UniqueId[];
  text?: UniqueId[];
  value?: UniqueId[];
  tooltip?: UniqueId[];

  // 维度展开的信息（笛卡尔积）
  cartesianInfo?: CartesianInfo;
  // 指标展开的信息（指标平坦化）
  foldInfo?: FoldInfo;
}