Bizcharts之如何实现图例和颜色绑定

最新推荐文章于 2022-01-20 15:00:25 发布

懒得懒

最新推荐文章于 2022-01-20 15:00:25 发布

阅读量2.6k

点赞数

分类专栏： bizchart 前端工具

本文链接：https://blog.csdn.net/wuChiSha/article/details/107465015

版权

本文详细介绍了在BizCharts中如何实现图例与颜色的动态绑定，即使数据缺失，也能保持图例颜色的固定。内容包括全量数据时的颜色展示、数据筛选后的颜色保持、图例顺序和堆积图顺序的调整，以及实现这些功能的关键代码和组件使用说明。

摘要由CSDN通过智能技术生成

一、需求描述

图例是动态的，即筛选条件不同，最终显示的图例个数和顺序也不同，但图例的颜色固定。如下图：

全量数据时：注意图中 “大二”和“大四”的颜色

部分数据时：

当有数据缺失时：“大二”和“大四”颜色还是之前的

代码：

https://github.com/yangGuangXiaDeHaiFeng/MyProject.git (git地址)，

目录：src/pages/charts/legendColor/LegendColor.tsx

二、实现思路

1、数据（item）必须是全量的；

2、将数据（item）和颜色绑定

核心代码：

export function dealData(d:any[],pro:string,c:string[]) {
  //  用对象来保存图例和颜色的对应关系
  const result = {};
  if(d&&d.length>0&&pro&&c&&c.length>0){
    const items = [...new Set(d.map((item: any) => item[pro]))];
    for(let i=0;i<items.length;i+=1){
      result[items[i]]=c[i%c.length];
    }
  }
  return result;
}

其他方面的实现就看具体需求了

三、案例代码

3.1需求说明

1、图例和颜色对应并固定，比如：“大二”无论在什么情况下都是 “red”;
2、“后来者居上”，比如：“大二”比“大一”大，所以堆积图显示时，“大二”应该在上面；
3、图例符合用户习惯，比如图例顺序应该是“大一、大二、大三、大四”或者“大二、大三、大四”而不应该是其他（“大四、大三”……）

3.2实现说明

经研究发现
①、图例顺序（从左到右）和堆积图顺序（从上到下）一致。即默认情况下“需求2”和“需求3”相悖；
====》图例：使用自定义图例，人为控制图例的顺序;
====>堆积图：按照顺序，给全量颜色
②、当某个值为null时，图表中不显示，但是图例依旧会显示
====》图例数据从横坐标取。

③、接口返回全量（图例）数据，逻辑上不存在的置为null。

3.3组件

import React from "react";
import {Axis, Chart, Geom, Legend, Tooltip} from "bizcharts";
// @ts-ignore
import Slider from 'bizcharts-plugin-slider';
// @ts-ignore
import DataSet from '@antv/data-set';
import {dealSliderChange, filterSliderData} from "@/pages/charts/utils/chartsCommon";

interface IStackedColumnPr