antv完成区间柱形图一列多柱配置实现详解

2024-12-05 21:27:25

使用antv 配置区间柱形图

需求：来源与产品的一个想法，想在 X 轴每一行输出多个区间柱形，以时间为分段，X轴底线显示时间，找了一下 echarts 的实现，可以使用配置函数的方式实现，但只实现了一行，而且函数的配置项其API 文档也晦涩难懂，最后使用 antv 的区间柱形图来实现，但是 antv 无法像 echarts 一样配置每一个柱形的颜色，因为他的 color 配置回调函数只接受一个 type 字符串类型，最后使用了数组队列匹配的方式来实现

使用的是 antv 的 g2plot 官方分组柱形图效果如下：定位链接： g2plot.antv.vision/zh/examples…

实现之后的效果

分享思路

文件引入这里是 html 文件，直接可以复制，下面的 js 文件我我们通过引入 CDN 的方式，这样在使用 demo 的时候更加方便

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .root {
      padding: 50px;
      width: 1600px;
      height: 500px;
    }
  </style>
  <body>
    <div id="container" class="root"></div>
  </body>
</html>

js文件

 <script
    type="text/javascript"
    src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"
  ></script>

引入了 g2 以后

上面引入了 g2 以后，我们开始分享业务逻辑，里面包含一些功能函数，会拆开首先是功能函数，会在我们的业务当中使用到的

// 时间处理
// 小时转分钟
function ChangeStrToMinutes(str) {
  var arrminutes = str.split(":");
  if (arrminutes.length == 2) {
    var minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1]);
    return minutes;
  } else {
    return 0;
  }
}
// 分钟转小时
function ChangeHourMinutestr(str) {
  if (str !== "0" && str !== "" && str !== null) {
    return (
      (Math.floor(str / 60).toString().length < 2
        ? "0" + Math.floor(str / 60).toString()
        : Math.floor(str / 60).toString()) +
      ":" +
      ((str % 60).toString().length < 2
        ? "0" + (str % 60).toString()
        : (str % 60).toString())
    );
  } else {
    return "";
  }
}
// 样式处理
const setStyles = (container, styles) => {
  for (const key in styles) {
    container.style[key] = styles[key];
  }
};
// 动态设置画布高度
function setHeigh(data, name, height = 100) {
  const dom = document.getElementsByClassName(name)[0];
  const count = data.length;
  dom.style["height"] = count * height + "px";
}

业务逻辑处理

注意点：

数据使用的是假数据，这里我们可以根据自己的业务需求进行修改和扩展因为区间柱形图使用的数据 data 是一个数组，所以在使用我们的数据的时候需要进行一下改造
在使用 color 回调函数进行配置颜色的时候，不知道里面的循环为什么会进入两次，如果有大佬可以解答或有其他解决方案欢迎交流，这里我使用了一个闭包的方式来记录次数，因为这里的数据我们业务上还没有和后端对接，所以暂时无法判定哪一条是第一个数据，而且 color 这回调函数也不提供其他参数，只提供一个 type 是字符串作为参数，所以我在上面数据处理的方法里面自己加入了一个空字符的 type，用来区分循环的进入。
因为 color 方法的参数只有 type，所以我也无法区分当前应该显示哪一种颜色，数据里面的 way 就是颜色，这里我使用了一个临时队列 arr 也是以闭包的形式存储，然后从我处理好的数据中过滤出当前 type 类型组成的一个数组，通过下标的方式取到当前对应的数据
tooltip 如果想要自定义的话需要使用 customContent API
由于我们这柱形一行有多个，默认是鼠标悬浮到当前行，没有到我们的柱上，就会有 tooltip 提示，可以设置shared 来匹配鼠标悬浮到柱形上才显示 tooltip

const { Bar } = G2Plot;
// 假数据
var busDataInfo = [
  {
    module: "BJ6123C7BTD",
    line: "8",
    wayLine: [
      {
        time: ["05:50", "06:30"],
        way: "E",
      },
      {
        time: ["06:42", "08:32"],
        way: "S",
      },
      {
        time: ["08:46", "10:39"],
        way: "E",
      },
      {
        time: ["14:06", "15:46"],
        way: "S",
      },
    ],
  },
  {
    module: "BJ6123C7BTD",
    line: "7",
    wayLine: [
      {
        time: ["05:00", "06:30"],
        way: "S",
      },
      {
        time: ["06:42", "08:32"],
        way: "E",
      },
      {
        time: ["08:46", "10:39"],
        way: "S",
      },
      {
        time: ["14:06", "15:46"],
        way: "E",
      },
    ],
  },
  {
    module: "BJ6123C7BTD",
    line: "6",
    wayLine: [
      {
        time: ["05:00", "06:00"],
        way: "S",
      },
      {
        time: ["06:12", "08:42"],
        way: "E",
      },
      {
        time: ["08:46", "09:09"],
        way: "S",
      },
      {
        time: ["14:06", "15:46"],
        way: "E",
      },
      {
        time: ["16:10", "18:00"],
        way: "S",
      },
      {
        time: ["18:34", "20:07"],
        way: "E",
      },
    ],
  },
];
// 数据改造 将上面的数据改造成我需要的数组格式
function changeData(data) {
  const outPutData = [];
  data.forEach((item) => {
    item.wayLine.forEach((every) => {
      outPutData.push({
        type: item.line,
        module: item.module,
        way: every.way,
        values: [
          ChangeStrToMinutes(every.time[0]),
          ChangeStrToMinutes(every.time[1]),
        ],
      });
    });
  });
  //TODO 这里是为了解决 颜色 处理部分循环进入两次的问题， 这里写在 上面的数据处理之前和之后 会有分别，分别在于 后面是否使用 reverse 反转数组
  outPutData.push({});
  return outPutData;
}
// 样式
const divStyles = {
  position: "absolute",
  background: "rgba(255,255,255,0.95)",
  boxShadow: "rgb(174, 174, 174) 0px 0px 10px",
  borderRadius: "4px",
  padding: "10px",
};
// 画布高度设置， 是根据数组数据长度，挂载点，以及高度 三个参数来进行设置
setHeigh(busDataInfo, "root", 60);
const data = changeData(busDataInfo);
// 画布实例化
const barPlot = new Bar("container", {
  barWidthRatio: 0.7, // 条形图宽度占比
  data: data,
  xField: "values",
  yField: "type",
  colorField: "type", // 部分图表使用 seriesField
  color: ((arg) => {
    var count = 0;
    var arr = [];
    return (arg) => {
      const { type = "" } = arg;
      if (type === "") {
        count = count + 1;
      }
      // 解决循环会进入两次的问题
      if (count !== 1) return;
      arr.push(type);
      let currentArr = data.filter((item) => item.type === type);
      let filterArr = arr.filter((item) => item === type);
      // 获取当前往返类型
      const wayType = currentArr[filterArr.length - 1]?.way;
      console.log("type", type, wayType, currentArr);
      if (wayType === "E") {
        return "#FF5CA2";
      }
      return "#6C3E00";
    };
  })(),
  xAxis: {
    // x轴文本标签配置项
    label: {
      formatter: (value) => {
        return ChangeHourMinutestr(value);
      },
    },
    // 坐标轴网格线的配置项
    grid: {
      // alignTick:false,
    },
    // 坐标轴线样式
    // line:
    // {
    //   style:
    //   {
    //     stroke: 'black',
    //     lineWidth: 1,
    //     strokeOpacity: 0.7,
    //     shadowColor: 'black',
    //     shadowBlur: 10,
    //     shadowOffsetX: 5,
    //     shadowOffsetY: 5,
    //     cursor: 'pointer'
    //   }
    // },
    // 坐标轴刻度线样式
    tickLine: {
      length: 1,
      style: (item, index, items) => {
        return {
          stroke: "black",
          lineWidth: 2,
          lineDash: [4, 5],
          strokeOpacity: 0.7,
          shadowColor: "black",
          shadowBlur: 10,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
          cursor: "pointer",
        };
      },
    },
    min: 270, // 坐标轴最小值  这里指分钟数
    tickCount: 20, // 坐标轴刻度数量 如果写了下面的刻度间隔， 则数量优先级变低
    tickInterval: 30, // 坐标轴刻度间隔
  },
  isRange: true,
  // 柱形上面的文字
  label: {
    content: "",
  },
  // barBackground: {
  //   style: {
  //     fill: '#000',
  //     fillOpacity: 0.01,
  //   }
  // },
  tooltip: {
    fields: ["type", "way", "module", "values"],
    // formatter:(data)=>{
    //   const { type,module,way,values} = data
    //   console.log('data',data);
    //   return {
    //     name:module,
    //     values:way
    //   }
    // },
    shared: false, // 只在鼠标悬浮到块上再展示
    showCrosshairs: false,
    customContent: (value, item) => {
      console.log("customContent", value, item[0]);
      if (!value || !item) return;
      const { data } = item[0];
      const container = document.createElement("div");
      setStyles(container, divStyles);
      container.innerHTML = `<div>车辆号码${data.type}</div><div>往返：${data?.way}</div>`;
      return container;
    },
  },
});
// 官方颜色主题
barPlot.update({
  theme: {
    styleSheet: {
      brandColor: "#FF4500",
      paletteQualitative10: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#B40F0F",
        "#2FB8FC",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
      ],
      paletteQualitative20: [
        "#FF4500",
        "#1AAF8B",
        "#406C85",
        "#F6BD16",
        "#B40F0F",
        "#2FB8FC",
        "#4435FF",
        "#FF5CA2",
        "#BBE800",
        "#FE8A26",
        "#946DFF",
        "#6C3E00",
        "#6193FF",
        "#FF988E",
        "#36BCCB",
        "#004988",
        "#FFCF9D",
        "#CCDC8A",
        "#8D00A1",
        "#1CC25E",
      ],
    },
  },
});
挂载
barPlot.render();

如果想查看本 demo 的效果，可以把以上代码直接复制到自己的 HTML 文件中，运行即可
参考 antv g2plot

以上就是antv完成区间柱形图一列多柱配置实现详解的详细内容，更多关于antv 区间柱形图一列多柱配置的资料请关注我们其它相关文章！

Vue+Antv F2实现混合图表

本文实例为大家分享了Vue+Antv F2实现混合图表的具体代码,供大家参考,具体内容如下一.npm安装 npm install @antv/f2 --save复制代码二.在main.js中引入 import F2 from '@antv/f2' Vue.prototype.$F2= F2; 三.在vue页面组件中创建canvas <template> <div id="app"> <canvas id="caseChart&
vue结合AntV G2的使用踩坑记录

目录 vue结合AntV G2使用踩坑 AntV-G2语法总结目的第一步语法基础第二步设置坐标轴的外观与度量第二步创建view vue结合AntV G2使用踩坑官网使用import G2 from '@antv/g2';引入但是会报一个 "export 'default' (imported as 'G2') was not found in '@antv/g2' 得错误找了半天原因,最终解决办法 import * as G2 from '@antv/g2' AntV-G2语法总结
vue+antv实现雷达图的示例代码

一.下载依赖 npm install @antv/data-set npm install @antv/g2 二.代码实现 <template> <div ref="container" /> </template> <script> import DataSet from '@antv/data-set' import { Chart } from '@antv/g2' export default { // 创建雷达图 mounted
vue2中使用AntV 以g2plot为实例

目录使用AntV以g2plot为例效果代码 antV g2的简单运用安装语法介绍使用AntV以g2plot为例效果代码 nmp 导入: npm install @antv/g2plot 代码: <template> <div id="app"> <div id="container"></div> </div> </template> <sc
Vue+ Antv F2实现层叠柱状图

本文实例为大家分享了Vue+ Antv F2实现层叠柱状图的具体代码,供大家参考,具体内容如下一. 创建canvas标签 <canvas id="caseChart" style="width: 100%;height: 230px;"></canvas> 二. 编写图表绘制代码 methods:{ //获取专利案件Chart图标信息 getCaseChartData(){ var _
vue+阿里的G2图表-antv+折线图实例

目录 vue阿里的G2图表-antv+折线图实现效果实现步骤 antv g2柱状图与折线图混合使用这是数据这是组件 vue阿里的G2图表-antv+折线图之前使用的图表是echarts+highcharts两个常用图表的,现在的话因为项目需要和别的原因也接触使用了阿里的g2图表,感觉效果还是挺好的,在这里分享下官网入口实现效果实现步骤第一:安装插件 npm install @antv/g2 --save 第二:lineCharts.vue,注意,图表这类型的数据必须mouned
antv完成区间柱形图一列多柱配置实现详解

目录使用antv 配置区间柱形图实现之后的效果分享思路 js文件引入了 g2 以后业务逻辑处理使用antv 配置区间柱形图需求: 来源与产品的一个想法,想在 X 轴每一行输出多个区间柱形,以时间为分段,X轴底线显示时间, 找了一下 echarts 的实现, 可以使用配置函数的方式实现,但只实现了一行,而且函数的配置项其API 文档也晦涩难懂, 最后使用 antv 的区间柱形图来实现, 但是 antv 无法像 echarts 一样配置每一个柱形的颜色, 因为他的 color
Vue Element Sortablejs实现表格列的拖拽案例详解

1. css: dragTable.css @charset "UTF-8"; .w-table{ height: 100%; width: 100%; float: left; } /* 拖动过程中,鼠标显示样式 */ .w-table_moving .el-table th .thead-cell{ cursor: move !important; } .w-table_moving .el-table__fixed{ cursor: not-allowed; } .w-ta
AntV F2和vue-cli构建移动端可视化视图过程详解

AntV F2是蚂蚁金服旗下的一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node, 小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验. AntV F2官方文档地址:https://antv.alipay.com/zh-cn/f2/3.x/ 话不多说,直接进入正题: Antv F2官方比较友好,给我们提供了两种方式方便我们使用,分别是CDN方式(引入在线资源 <script src="http
bootstrap table实现iview固定列的效果实例代码详解

因为bootstrap自带的固定列效果满足不了公司需求,所以借助fixed-table这个插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右两侧固定列,中间内容可以横向拖动</title> <link rel="stylesheet" hr
使用antv替代Echarts实现数据可视化图表详解

目录前言面积图常用参数文档图表度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图数据标签 label chart.coordinate() chart.interval(options) 地图地图容器配置项 map 地图等级 viewLevel 小结前言技术永无止尽,多看看不同风景周一,还在愉快的为移
Python绘图之柱形图绘制详解

前言用python编程绘图,其实非常简单.中学生.大学生.研究生都能通过这10篇教程从入门到精通!快速绘制几种简单的柱状图. 1垂直柱图(普通柱图) 绘制普通柱图的python代码如下: (左右滑动可以查看全部代码) # -*- coding:utf-8 -*- # 申明编码格式为utf-8 import matplotlib as mpl import matplotlib.pyplot as plt mpl.rcParams["font.sans-serif"]=["S
SQL行转列和列转行代码详解

行列互转,是一个经常遇到的需求.实现的方法,有case when方式和2005之后的内置pivot和unpivot方法来实现. 在读了技术内幕那一节后,虽说这些解决方案早就用过了,却没有系统性的认识和总结过.为了加深认识,再总结一次. 行列互转,可以分为静态互转,即事先就知道要处理多少行(列);动态互转,事先不知道处理多少行(列). --创建测试环境 USE tempdb; GO IF OBJECT_ID('dbo.Orders') IS NOT NULL DROP TABLE dbo.Orde
详解MyBatis的getMapper()接口、resultMap标签、Alias别名、尽量提取sql列、动态操作

一.getMapper()接口解析:getMapper()接口 IDept.class定义一个接口, 挂载一个没有实现的方法,特殊之处,借楼任何方法,必须和小配置中id属性是一致的通过代理:生成接口的实现类名称,在MyBatis底层维护名称$$Dept_abc,selectDeptByNo() 相当于是一个强类型 Eg 第一步:在cn.happy.dao中定义一个接口 package cn.happy.dao; import java.util.List; import cn.happy.e
Oracle sqlldr导入一个日期列实例详解

Oracle sqlldr导入一个日期列实例详解 1. LOAD DATA INFILE * INTO TABLE test FIELDS TERMINATED BY X'9' TRAILING NULLCOLS ( c2 "upper(:c2)", c3 date "yyyymmdd", c1 "SEQ_test_c1.nextval" ) BEGINDATA AAAAAAAAAA 20051201 BBBBBBBBBB 20050112 CR
详解C#设置Excel数据自适应行高、列宽的2种情况

Excel表格中,由于各种数据的复杂性,可能存在单元格中的数据字号大小.数据内容长度不一而出现,列宽过宽.过窄或者行高过大.过小的问题.常见的解决方法是调整行高.列宽.在Microsoft Excel中,在单元格格式设置中可手动设置自适应行高或自适应列宽,但通过代码,我们可以通过方法AutoFitColumns()或者AutoFitRows()来设置指定数据范围或整个工作表的自适应行高.列宽.这里设置自适应分以下2种情况来进行: 1. 固定数据,设置行高.列宽自适应数据 2. 固定行高.列宽,设