如何自定义雷达图富文本轴标签样式?

问题来源:VChart 能否支持类似富文本样式的轴标签样式?

问题描述

期望在标签中支持自定义 icon 和不同的文本样式,类似于:

解决方案

首先,分析一下需求,图中是极坐标系下角度轴的标签。

  1. 添加轴配置

    1. 在 VChart 中可以通过 axes 属性来配置轴,axes 接收一个数组,添加一项,将 axes[0].type: 'angle' 设置轴类型为角度轴;
  2. 配置轴标签

    1. 通过格式化函数 formatMethod 配置 axes[0].label 为富文本。
    2. formatMethod 返回一个富文本内容的配置对象
    3. type: 'rich':定义返回文本类型为富文本
    4. text: 富文本的详细配置。支持文字和图片两种类型,详细配置可以参考配置项文档
scala 复制代码
formatMethod: (value, data, c, d) => {
  return {
    type: "rich",
    text: [
      {
        image:
          '<svg t="1714116158819" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19433" width="200" height="200"><path d="M1152 76.8v870.4h-1075.2v-870.4h1075.2M1228.8 0H0v1024h1228.8V0z" fill="#0686E5" p-id="19434"></path><path d="M0 0h1228.8v1024H0z" fill="#0686E5" p-id="19435"></path></svg>',
        width: 2,
        height: 10,
      },
      {
        text: ` ${value} `,
        fontSize: 16,
        fill: "black",
        fontWeight: "bold",
      },
      {
        text: ` ${values.find((v) => v.key === value)?.value} `,
        fontSize: 16,
        fill: "rgb(22,100,255)",
        fontWeight: "bold",
      },
    ],
  };
},

代码示例

🔔 下面的代码,可以复制粘贴到编辑器中查看效果

yaml 复制代码
const values = [
        {
          key: 'Strength',
          value: 5
        },
        {
          key: 'Speed',
          value: 5
        },
        {
          key: 'Shooting',
          value: 3
        },
        {
          key: 'Endurance',
          value: 5
        },
        {
          key: 'Precision',
          value: 5
        },
        {
          key: 'Growth',
          value: 5
        }
      ];

const spec = {
  type: 'radar',
  data: [
    {
      id: 'radarData',
      values
    }
  ],
  categoryField: 'key',
  valueField: 'value',
  point: {
    visible: false // disable point
  },
  area: {
    visible: true, // display area
    state: {
      // The style in the hover state of the area
      hover: {
        fillOpacity: 0.5
      }
    }
  },
  line: {
    style: {
      lineWidth: 4
    }
  },
  axes: [
    {
      orient: 'radius', // radius axis
      zIndex: 100,
      min: 0,
      max: 8,
      domainLine: {
        visible: false
      },
      label: {
        visible: true,
        space: 0,
        style: {
          textAlign: 'center',
          stroke: '#fff',
          lineWidth: 4
        }
      },
      grid: {
        smooth: false,
        style: {
          lineDash: [0]
        }
      }
    },
    {
      orient: 'angle', // angle axis
      zIndex: 50,
      tick: {
        visible: false
      },
      domainLine: {
        visible: false
      },
      label: {
        space: 20,
         formatMethod: (value, data,c,d) => {
          console.log(value,data,c,d)
      return {
        type: 'rich',
        text: [
          {
            image: '<svg t="1714116158819" class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19433" width="200" height="200"><path d="M1152 76.8v870.4h-1075.2v-870.4h1075.2M1228.8 0H0v1024h1228.8V0z" fill="#0686E5" p-id="19434"></path><path d="M0 0h1228.8v1024H0z" fill="#0686E5" p-id="19435"></path></svg>',
            width: 2,
            height: 10
          },
          {
            text: ` ${value} `,
            fontSize: 16,
            fill: 'black',
            fontWeight: 'bold'
          },
           {
            text: ` ${values.find(v => v.key === value)?.value} `,
            fontSize: 16,
            fill: 'rgb(22,100,255)',
            fontWeight: 'bold'
          }
        ]
      };
    }
      },
      grid: {
        style: {
          lineDash: [0]
        }
      }
    }
  ]
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

相关文档

富文本 demo:visactor.io/vchart/demo...

相关api:visactor.io/vchart/opti...

github:github.com/VisActor/VC...

相关推荐
FIT2CLOUD飞致云19 小时前
操作教程 | 在DataEase中嵌入SQLBot开源智能问数系统
开源·数据可视化
山海鲸可视化1 天前
简单聊聊数据可视化大屏制作的前端设计与后端开发
前端·信息可视化·数字孪生·数据可视化·3d模型·三维渲染
玄魂1 天前
VTable Gantt 智能 zoom(缩放)功能介绍与开发实践
前端·开源·数据可视化
HsuHeinrich2 天前
利用径向柱图探索西班牙语学习数据
python·数据可视化
玄魂2 天前
VChart 官网上线 智能助手与分享功能
前端·llm·数据可视化
京东零售技术2 天前
Hudi系列:Hudi核心概念之时间轴(TimeLine)
大数据·数据可视化
聊聊MES那点事3 天前
汽车零部件MES系统实施案例介绍
人工智能·信息可视化·汽车·数据可视化
敲敲敲敲暴你脑袋3 天前
用3Dmol.js展示3D分子结构
typescript·webgl·数据可视化
我要学习别拦我~4 天前
数据比例与尺度:如何避免让图“放大”差异
经验分享·信息可视化·数据可视化
SelectDB4 天前
岚图汽车 x Apache Doris : 海量车联网数据实时分析实践
数据分析·github·数据可视化