G2 4.x 文档问题统一反馈和吐槽

[xiaobindebingo]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://g2.antv.vision/zh/docs/manual/tutorial/event

Steps to reproduce

直接访问这个文档阅读就会发现很多错误

Environment	Info
g2	4.0.14
System	-
Browser	-

---

期望能及时更新文档，让G2设计这么好的图表可视化工具社区快速繁荣起来，

[xiaobindebingo]

比如这里，这个对象上包括原型链上根本没有isShape这个属性或者方法

[Sai0514]

顶一个

[wangjiahan]

好多404

[hustcc]

文档问题确实很多，最近我们正在整治。这个 issue 作为统一的文档吐槽和反馈，置顶在 issue 中了。欢迎搭建监督吐槽。

[hustcc]

@所有人，4.x 文档重构中，目录大纲如下：https://www.yuque.com/antv/g2-docs/putwke

欢迎感兴趣贡献的同学来参入（如果有意向，随便挑，相信负责的同学会很愿意让出来的），也欢迎在 PR 阶段来 Code Review。

[bhabgs]

内置组件使用，没有找到较为详细的内容，目前在使用sider上遇到了问题。不知道如何与当前chart下的view数据进行联动

[hustcc]

目前在使用sider上遇到了问题。不

组件部分，我们会出一个详细的配置手册和使用方式。你自己关系 slider 的使用问题，也可以单独一个 issue 提出，我们看看是 bug 还是优化，看看怎么解决。

[jiankafei]

建议官方自己先过一遍文档，现在看着真的有点乱

[DarrenPei]

https://g2.antv.vision/zh/docs/manual/upgrade
《G2 4.0升级指南》
“具体配置属性详见 API”中的API链接失效404.

[SentretC]

对 geometry.state() 方法的说明中，对 StateOption 接口的描述与实际不符。
例如设置 active 状态的填充透明度，根据文档应写作 geometry.state({ active: { fillOpacity: 1 } });，而实际上需要写作 geometry.state({ active: { style: { fillOpacity: 1 } } });。

[AlexTMing]

有没有对折线图上的折线命名的方法呢 ？

[hustcc]

有没有对折线图上的折线命名的方法呢 ？

给折线命名是什么意思？

[AlexTMing]

有没有对折线图上的折线命名的方法呢 ？

给折线命名是什么意思？

就是 比如我现在有一张折线图，上面有两条线 分别代表当前时间段的登录pv以及uv， 在每条折线的上自定义名称，有且仅显示一次（pv，uv），不是 legend ，不是每个点的数据，也不用在意最大值最小值，只是更直观的显示这条线是代表pv 或者 uv的。请问有支持嘛？ 我找语雀还有文档都没看到

[visiky]

有没有对折线图上的折线命名的方法呢 ？

给折线命名是什么意思？

就是 比如我现在有一张折线图，上面有两条线 分别代表当前时间段的登录pv以及uv， 在每条折线的上自定义名称，有且仅显示一次（pv，uv），不是 legend ，不是每个点的数据，也不用在意最大值最小值，只是更直观的显示这条线是代表pv 或者 uv的。请问有支持嘛？ 我找语雀还有文档都没看到

chart.geometries 的顺序会和你创建的顺序(chart.line().xxx)保持一致

[fancy-cat]

自定义热力图背景 this.chart.annotation().image({src: '本地图片'}) 为什么图片显示不出来

[hustcc]

自定义热力图背景 this.chart.annotation().image({src: '本地图片'}) 为什么图片显示不出来

如果不是文档问题，可以新开 issue。这个问题应该就是不能使用本地图片，存在跨域问题。使用 url 的方式。

[fancy-cat]

自定义热力图背景 this.chart.annotation().image({src: '本地图片'}) 为什么图片显示不出来

如果不是文档问题，可以新开 issue。这个问题应该就是不能使用本地图片，存在跨域问题。使用 url 的方式。

好的 我新开一个

[zmen]

G2 主题配置项详解

主题配置项中关于 Tooltip 的部分，只说了开放哪些配置，却没有说怎么配置，看了有些无从下手。

作为对比，同一个页面下，文档的其它部分，都有介绍每个属性名与描述的表格。（其实有表格的那些也不是特别清晰，建议每个部分有对应的示例，会减少很多歧义）

--- 更新 ---

在源码里找到了对应的配置，src/util/theme.ts 建议在文档里加上这个链接。

[ymh1028]

safari 文档页展示有问题

safari Version 13.1.1 (15609.2.9.1.2)

[hustcc]

主题自定义文档，不够清晰。

[xianshenglu]

https://antv-g2.gitee.io/en/docs/api/general/legend 我想设置 图例项 宽度，但是没有找到可以用的 api, itemWidth 和 maxWidth 都不太有用。

直到在代码提示中，发现一个 maxItemWidth ，测试结果证明，是可以设置 图例项 宽度的，但是文档中并没有。

[lswl66]

animate的 easing delay duration 的回调参数有问题
https://g2.antv.vision/zh/docs/api/general/animate 这里说是：

/**
 * @param  {Number} index      shape 的索引值
 * @param  {Number} id shape 的 id 标识
 **/

https://www.yuque.com/antv/g2-docs/geometry#animate 到了这里回调的参数变成了：
(data) => number;

[bhabgs]

关于chart state 配置问题

今天开发chart 遇到一个问题 就是点击chart 上面某一块的时候，给对应的 块加上label， 看到文档已有 state => selected 也就是当某一项被点击选中后。
我就想这块应该能配置了把，但是看到里面就一个style属性，style也行我寻思就是按照ShapeAttrs(需求可能不满足)，但是仔细看了下还不是单纯的ShapeAttrs，我以为有戏了吧，赶紧看看都是什么类型。结果进到源码一看 类型很草率的给了一个 通用对象

通用对象也行，我想文档总会写清楚 都有哪些配置把。结果还是我草率了，那个有大神知道有什么方法能满足我的需求吗🥺。

源码地址

[maplor]

本周更新了新的文档？现在 chart 实例的API被去掉了，类似 filter，createView 等都看不到。

[muyuanshan]

各位大佬想问一下，4.0版本 chart.line().select() 还可以使用吗？ 在使用的过程中发现报错了，若是不能使用了，麻烦问一下，怎么修改选中态折线的样式呢？感谢

[CoolHenry]

草率了

[lessmost]

各位大佬想问一下，4.0版本 chart.line().select() 还可以使用吗？ 在使用的过程中发现报错了，若是不能使用了，麻烦问一下，怎么修改选中态折线的样式呢？感谢

4.x 状态需要在 Element 上设置， line.elements.forEach(elem => elem.setState('selected', true))

[YangGuoXuan-0503]

自定义交互部分：https://g2.antv.vision/zh/docs/api/advanced/registerinteraction
{
trigger: 'eventName',
action: 'actionName:method' | [] | function(context) {},
isEnable(context) {}, // 可选
callback(context) {}, // 可选
once: false // 可选，默认 false
}
action 中说可以用 function定义， 但是我将context的cfg更改为想要的配置项并无任何动画， 是我写错了ma ?
以下是我写的：
action: (context) => {
let listActive = context.actions[1];
let ElementActive = context.actions[2];

      listActive.cfg = {
        lineWidth: 2,
      } 

      ElementActive.cfg = {
        strokeOpacity: 0,
      } 
      context.actions[1] = listActive;
      context.actions[2] = ElementActive;
    },

[tinymoo]

geometries 的通用方法现在在文档里找不到了

[alphabetabc]

调整 - Adjust 应该放到 geometry 下面吧？后续还有其他部署？
属性间的层级关系应该清晰一些，如果不注意就可能搞半天乌龙

// 下面两行代码应该是完全不一样的吧？
chart.adjust()
gemetry.adjust() 

https://antv-g2.gitee.io/zh/docs/api/general/adjust

[laukin]

G2 4.x 版本以后是否还支持 “使用配置项创建图表”的功能？ 当前从官方文档中已看不到 “使用配置项创建图表”、DataSet 等相关API了，操心的很。 正在给数据可视化框架进行选型，请给吃个定心丸

[feikerwu]

非吐槽，想问下这里可视化引擎和图可视化引擎的区别

[Youmyin]

官方文档DataSet的详细文档又404了，想看看Transform的API

[galaa2011]

垃圾啊,用了一次伤到了

[alphabetabc]

g2 坐标轴文档捉虫 label.formatter 并不是返回any

[hustcc]

@alphabetabc 有兴趣来来 pr 直接改掉不？

[bingqichen]

https://g2.antv.vision/zh/docs/api/general/axis#axisoptiontitle 中关于 AxisTitleCfg 的内容是不是忽略了很多可配置项啊，我在找如何配置坐标轴标题的位置，死活找不到，搜索别的文章才找到，差点就给你们提bug了说没这个功能了，即下面代码中的 position

title: {
  autoRotate: {boolean}, // 是否需要自动旋转，默认为 true
  offset: {number}, // 数值，设置坐标轴标题距离坐标轴线的距离
  // 设置标题的文本样式
  textStyle: {
    textAlign: 'center', // 文本对齐方向，可取值为： start middle end
    fill: '#404040', // 文本的颜色
    fontSize: '12', // 文本大小
    fontWeight: 'bold', // 文本粗细
    rotate: 30, // 文本旋转角度，以角度为单位，仅当 autoRotate 为 false 时生效
    textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
  },
  position: 'start' | 'center' | 'end' // 标题的显示位置（相对于坐标轴线），可取值为 start center end
}

[wonggai]

文档中提到 label.layout.type 提供三种类型。官方蜘蛛标签中出现 pie- spider 类型。是否把这些全局注册的 label type加入到文档，并且 labelLine 和 adjust api相关吗？官方例子中，删除 adjust，labelLine 消失。这里是我的理解问题，还是文档没有说明这些，求指教

[DvShu]

文档中的对于按需加载能否更详细一点？想要按需使用的话，每一次都不知道具体该引入哪些动画、哪些Label；在新版的 echarts 的文档就比较好，会有 js、ts、全部代码、按需加载的代码。

[whenTheMorningDark]

我真的无语死了，选择这个我真哭死。大家帮忙看看这个有什么问题

  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // 初始化图表实例
  const chart = new Chart({
    container: 'container',
  });

  // 声明可视化
  chart
    .interval() // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'genre') // 编码 x 通道
    .encode('y', 'sold'); // 编码 y 通道

  // 渲染可视化
  chart.render();

报错了

能用echart就用echart吧

[pearmini]

我真的无语死了，选择这个我真哭死。大家帮忙看看这个有什么问题

  const data = [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ];

  // 初始化图表实例
  const chart = new Chart({
    container: 'container',
  });

  // 声明可视化
  chart
    .interval() // 创建一个 Interval 标记
    .data(data) // 绑定数据
    .encode('x', 'genre') // 编码 x 通道
    .encode('y', 'sold'); // 编码 y 通道

  // 渲染可视化
  chart.render();

报错了 能用echart就用echart吧

你用的语法是 5.0 的语法，但你安装的应该是 4.0 的版本？