如何实现多分组柱状图以及按照分组维度高亮的交互?

问题描述

在工作中,有人问我,类似下面图里的柱状图如何实现:

  1. 期望两个分组通过颜色透明度进行样式上的区分;
  2. 当鼠标悬浮在一个柱子区块时,联动高亮相同颜色的所有区块;

交互示意:

解决方案

本人对字节跳动的图表库 VChart 比较熟,用这个举个例子。

  1. 需要 4 个数据字段:
  2. 3 个分组字段:x 轴上有 3 层分组,分别对应字段 xField: ['type', 'type1', 'type2'];
  3. 1 个系列字段:用于区分颜色系列, seriesField: 'color'
  1. 高亮交互:可以配置 VChart 内置 element-highlight-by-group交互,指定交互高亮状态名为 'highligh',从而在图元样式中,为柱子添加描边效果:
css 复制代码
  interactions:[
    {
       type: 'element-highlight-by-group',
       highlightState:'highlight'
    }
  ],
  bar:{
    state:{
      highlight:{
        stroke:"black",
        lineWidth:1,
        zIndex:100
      }
    }
  },

相关文档

附完整代码:

可以粘贴到 编辑器 上尝试一下:

less 复制代码
const spec = {
  type: 'bar',
  height:400,
  data: [
    {
      values: [
        { type: 'Category One', min: 80,  color: 'A', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 75,  color: 'C', type1: 'p', type2: 'T' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T1' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T1' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T2' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T2' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T3' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T3' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p', type2: 'T4' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p', type2: 'T4' },
        
        { type: 'Category One', min: 80,  color: 'A', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 75,  color: 'C', type1: 'p1', type2: 'T' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T1' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T1' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T2' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T2' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T3' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T3' },

        { type: 'Category One', min: 70,  color: 'A', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'B', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 40,  color: 'D', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 50,  color: 'C', type1: 'p1', type2: 'T4' },
        { type: 'Category One', min: 30,  color: 'E', type1: 'p1', type2: 'T4' },

        

        { type: 'Category Two', min: 76,  color: 'A', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 65,  color: 'C', type1: 'p', type2: 'T' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T1' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T1' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T2' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T2' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T3' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T3' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p', type2: 'T4' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p', type2: 'T4' },
        
        { type: 'Category Two', min: 80,  color: 'A', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 75,  color: 'C', type1: 'p1', type2: 'T' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T1' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T1' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T2' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T2' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T3' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T3' },

        { type: 'Category Two', min: 70,  color: 'A', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'B', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 40,  color: 'D', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 50,  color: 'C', type1: 'p1', type2: 'T4' },
        { type: 'Category Two', min: 30,  color: 'E', type1: 'p1', type2: 'T4' },
      ]
    }
  ],
  interactions:[
    {
       type: 'element-highlight-by-group',
       highlightState:'highlight'
    }
  ],
  bar:{
    style:{
      fillOpacity:(data) => data.type1 === 'p' ? 1: 0.5
    },
    state:{
      highlight:{
        stroke:"black",
        lineWidth:1,
        zIndex:100
      }
    }
  },
  xField: ['type', 'type1', 'type2'],
  yField: 'min',
  seriesField: 'color',
  axes: [
    {
      orient:"left",
      label:{ visible: false},
      grid:{ style:{ lineDash:[4,4], stroke:'#dddddd'} }
    },
    {
      orient:"bottom",
      paddingInner:[0.1,0.05,0.5]
    }
  ],
  tooltip:{
      visible:false
  }
};

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

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
相关推荐
因吹斯汀4 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡8 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧8 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼10 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学4623828 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程31 分钟前
你真的了解 Map、Set 嘛
前端
崔璨35 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv35 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
whysqwhw1 小时前
Hippy 跨平台框架扩展原生自定义组件的完整实现方案对比
前端