跳到主要内容

VISALL 雷达图 (Radar Chart) 使用文档

简介​

雷达图组件是VISALL数据可视化库中的重要图表类型之一，支持多维数据的比较和展示。该组件能够在一个二维平面上同时展示多个维度的数据，非常适合进行多维数据的比较分析。

基本用法​

import { render } from 'path/to/bundle.esm.min.js';

// 创建雷达图
const chart = render(container, {
  layers: [
    {
      type: 'radar',
      dataIndex: 0,
      encoding: {
        x: '类别', // 数据类别字段
        y: ['指标1', '指标2', '指标3'] // 雷达图的多个维度指标
      }
    }
  ],
  data: [
    {
      values: [
        { 类别: '产品A', 指标1: 80, 指标2: 90, 指标3: 70 },
        { 类别: '产品B', 指标1: 70, 指标2: 65, 指标3: 85 },
        // ...更多数据
      ]
    }
  ]
});

配置参数​

参数类型默认值说明
encoding.xstring-数据类别字段名，必须提供一个字符串或日期类型字段
encoding.ystring[]-雷达图各维度指标，必须是数值类型，且数量要求大于2且不超过10
dataIndexnumber0指定使用的数据集索引

数据要求​

  • x字段要求为字符串或日期类型，表示不同的数据类别
  • y字段要求为数值类型，表示各维度指标值
  • 提供准确的字段名映射

高级用法​

多系列雷达图​

多系列雷达图可以用于比较不同类别的多维度指标：

{
  type: 'radar',
  encoding: {
    x: '产品',
    y: ['性能', '价格', '外观', '耐用性', '易用性']
  }
}

潜规则与注意事项​

  1. 文本自动截断：

    • 当维度名称过长时，系统会自动截断并添加"..."。
    • 截断的计算基于字体大小和可用空间，确保图表布局美观。
    • 截断通过formatter实现，计算方式：util.canvas.measureTextWidth(value, fontSize, fontFamily) > fixedTextWidth

  2. 维度顺序处理：

    • 雷达图在渲染时会对维度进行特殊处理：第一个维度保持不变，其余维度会反转顺序。
    • 这在代码中的实现为：[indicatorData[0], ...indicatorData.slice(1).reverse()]

  3. 布局自适应：

    • 根据容器大小，雷达图会自动调整其半径和文本显示宽度。
    • 大尺寸布局下使用80%的半径，小尺寸布局特别是SMALL_1_2类型下使用60%半径。

  4. 提示框格式化：

    • 提示框会展示当前数据点所有维度的值和单位信息。
    • 单位信息通过dataMetaInfo[item.seriesName]?.unit获取。

实现原理​

雷达图组件内部使用以下主要步骤处理数据：

  1. 数据预处理：计算每个维度的最大值，作为雷达图各轴的上限
  2. 维度编码：将原始数据映射到雷达图的各个轴
  3. 自适应计算：根据容器大小动态调整文本宽度和图表半径
  4. 标签处理：长标签文本自动截断并添加省略号

类型兼容性问题​

使用本组件时，需要注意以下类型兼容性问题：

  1. 确保y字段为数组类型，且数组元素为字符串（字段名）
  2. x字段必须是字符串类型
  3. 数据对象中必须包含所有在y中指定的字段，且这些字段的值必须是数值类型

示例​

基础雷达图​

{
  type: 'radar',
  encoding: {
    x: '产品',
    y: ['质量', '价格', '外观']
  }
}

多系列对比雷达图​

{
  type: 'radar',
  encoding: {
    x: '季度',
    y: ['销售额', '利润', '市场份额', '客户满意度', '员工效率']
  }
}

常见问题解决​

  1. 雷达图显示不全

    • 检查容器大小是否足够
    • 检查维度数量是否在允许范围内（3-10个）

  2. 标签显示不完整

    • 长标签会自动截断，考虑使用更简短的维度名称
    • 调整容器大小以获得更多显示空间

  3. 数据类型错误

    • 确保x字段是字符串或日期类型
    • 确保y字段中指定的所有维度值都是数值类型

  4. 适配不同尺寸

    • 雷达图会根据布局类型自动调整大小
    • 在小尺寸布局下，考虑减少维度数量以获得更好的可读性
编辑此页
最后由 gongyuzhouchang 于 更新