antv g2plot g6 遇到的一些问题 部分未解决 部分已解决 部分关联官方issue

未能解决
折线图

autohidden

​ axis-label 设置autohidden 长度

​ 宽度足够autohidden不能自动展开

交互region-active时 point样式自定义

?缩略轴内文本隐藏或省略

多折线图

​ 缩略轴仅显示一条线 不能隐藏线 或展示多条线 官方文档提到未适配

(img-tzI7ISZs-1640683874968)(C:\Users\xin_zhang\AppData\Roaming\Typora\typora-user-images\image-20211222105420316.png)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-52H0Omgt-1640683874969)(C:\Users\xin_zhang\AppData\Roaming\Typora\typora-user-images\image-20211222110427399.png)]
在这里插入图片描述

雷达图

调整圆点样式 使其与折线图中样式一致 不方便

其他

​ 散点图 tooltip

​ shared不合并显示

​ https://github.com/antvis/G2Plot/issues/2001

​ changedata 鼠标位置不变 element-active的元素不变

​ 文本过长 label rotate后 在 部分拖动区间 显示不全文本

​ https://github.com/antvis/G2Plot/issues/3030

​ 仪表盘声明报错 声明要求string 但是实际需要number才有效

​ statistic.content.style.fontSize

已解决

自定义tooltip后 tooltip滑动不流畅

​ 重新配置interaction可以优化动画卡顿问题

      interactions: [
        {
          type: 'tooltip',
          cfg: {
            start: [{ trigger: 'plot:mousemove', action: ['tooltip:show'] }],
            end: [{ trigger: 'plot:mouseleave', action: ['tooltip:hide'] }],
          },
        },
      ],

g6图残影

​ https://github.com/antvis/G6/issues/2492

​ graph.get(“canvas”).set(“localRefresh”, false)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
antv G2Plot 中,可以通过 `slider` 配置项来自定义缩略轴。具体步骤如下: 1. 在 G2Plot 中启用缩略轴,使用 `slider: true` 配置项。 2. 使用 `slider: {}` 配置项来自定义缩略轴,其中包括以下常用配置: - `start`: 缩略轴的起始位置,一般为 0。 - `end`: 缩略轴的结束位置,一般为 1。 - `height`: 缩略轴的度。 - `xAxis`: 缩略轴的 X 轴配置项,包括 `type`、`grid` 等。 - `yAxis`: 缩略轴的 Y 轴配置项,包括 `type`、`grid` 等。 - `backgroundStyle`: 缩略轴的背景样式,包括 `fill`、`fillOpacity` 等。 - `data`: 缩略轴的数据,一般为原始数据的子集。 例如,下面是一个简单的自定义缩略轴的示例代码: ```javascript import { Line } from '@antv/g2plot'; const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const linePlot = new Line('container', { data, xField: 'year', yField: 'value', slider: { start: 0, end: 0.5, height: 26, xAxis: { type: 'time', grid: null, }, yAxis: { grid: null, }, backgroundStyle: { fill: '#f5f5f5', fillOpacity: 0.9, }, data: data.slice(0, 4), }, }); linePlot.render(); ``` 在上述代码中,我们使用 `slider` 配置项来自定义缩略轴,其中: - `start` 和 `end` 分别为缩略轴的起始位置和结束位置,这里设置为 0 和 0.5。 - `height` 为缩略轴的度,这里设置为 26。 - `xAxis` 和 `yAxis` 分别为缩略轴的 X 轴和 Y 轴配置项,这里设置为时间轴和无网格线。 - `backgroundStyle` 为缩略轴的背景样式,这里设置为浅灰色。 - `data` 为缩略轴的数据,这里设置为原始数据的前四个点。 你可以根据实际需求修改以上配置项来自定义缩略轴。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值