antvis / g2plot Goto Github PK

蜘蛛图下面的标注线位于饼图下方的标注线 折点需要优化

1. 饼图中间需要分割线

2. responsive 默认值需要设置为true

3. 环形图默认值太瘦了，需要调优

错误信息

复现配置项

it('创建饼图, 量级小, spider label', () => {
    const canvasDiv = createCanvasDiv('canvasDiv1')
    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: smallData,
      label: {  
        visible: true,
        type: 'spider',
        style: {
          // todo 自定义连线颜色
        }
      },
      angleField: 'y',
      colorField: 'x',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 1,
      title: {
        text: '饼图 - spider label',
      },
      description: {
        text: '1.label默认展示为“colorField value(上)angleField value(下，默认换行显示)”; \n2.[todo]label连线颜色设为灰色; \n3.[todo]label添加hover交互; \n',
      },
      legend: {
        visible: false,
      },
      events: {
        'label:mousemove': (...args) => {
          console.info('fixme: spiderLabel 设置该事件的时候 会不生效');
        },
      }
    });

    pie.render();
  });

        document.getElementsByClassName('ring-guide-html')[0].innerHTML = htmlString;

当页面中有多个环图时，此时依靠 classname 取的环图的结点，有问题，交互会错乱。

可以使用你们的demo area-basic.html 进行 测试
添加

lable: {
  visible:  false
}

Although the names of chart types have many variations in Chinese, they do have uniform terminology in English. As a library based on chart taxonomy, the naming of chart types needs to be consistent with international conventions, otherwise it will be confusing to users.

For example:

• ring -> donut (or doughnut, but donut is neater)
• stack XXX -> stacked XXX
• group XXX -> grouped XXX

More resources to refer to:

• https://www.data-to-viz.com/
• https://datavizcatalogue.com/index.html
• https://datavizproject.com/
• http://tuzhidian.com/

responsive 打开，xAxis 配置为 dateTime 类型，但实际数据不是标准的时间格式，moment 解析不出来。
底层应该兼容下，默认为 cat 类型吧，再抛出 warning ？

https://github.com/antvis/g2plot/blob/dbe398091d0a5e35f64020f270565a86564a6a11/src/base/ViewLayer.ts#L17

此处创建的是一个 G2.View，但是命名上一直是一个plot，并且外部调用直接都是 xxxPlot.getLayer().plot 很容易造成误解(G2 view和plot概念不清)
是否可以在 Layer类提供一个getG2view的方法，利用方法名说明使用方式

在plot padding为[0, 0, 0, 0]，显示无问题

在plot padding为auto的时候，会出现无用的留白

主题配置legend为top-left的时候，bar 和area 的legend，在计算padding的时候 position是‘bottom-center’

目前的图层存在以下问题：

• 一些应该属于layer的方法放在了plot中，如状态量更新的相关方法
• layer => plot的方法需要进行抽象
• 单layer plot（即除混合图表模式的所有图表）的方法没有透传到plot

当饼图label设置如下时，显示结果如图1
其他：type为spider时显示正常，或者不设置style的时候，显示也正常

label: {
     type: 'inner', // 或 outter
     visible: true,
     formatter: () => 'inner label',
     style: {
        text: {
          fill: '#666',
          fontSize: 12,
          // lineHeight: 16,
        },
    },
},

图表属性的title 以及description 还有坐标轴xAxis 和yAxis 的 title 都有这个问题

label 布局失效

spider 的label，返回的值和inner outer的不一致

是否保证一个命名规则，规则大概为：

• 全小写
• 如果多个单词的，用 - 分割

例如：

• plot
• base-interaction

如果可以的话， 看到一个改一个，逐步改掉吧~

https://github.com/antvis/g2plot/blob/master/src/interface/config.ts#L99

如果要禁用 tooltip，那么 g2plot 是

tooltip: {
  visible: false
}

看看其他图表库：

• echarts: tooltip: false
• highcharts: tooltip: false
• ...

为什么要在这种大家都觉得约定俗成的配置项上做创新？本身这个配置项就够长了，我写个禁用还要占个三行这是什么毛病

const linePlot = new Line(canvasDiv, {
      width: 600,
      height: 600,
      data: data1,
      xField: 'year',
      yField: 'value',
      responsive: true,
      xAxis: {
        visible: false
      },
    });
    linePlot.render();

报错

 /** 获取数据标签的renderer实例 */
  protected _getDataLabel(): Label | null {
    const labelController = this._getElement().get('labelController');
    return labelController.labelsContainer ? labelController.labelsContainer.get('labelsRenderer') : null;
  }

// 获取标签点
  private _getLabelItems(): TextType[] {
    const labelsRenderer = this._getDataLabel();
    const labelItems = labelsRenderer.get('items');
    return labelItems;
  }

结果
labelItems.length !== data.length

如题，theme中的default只保存默认全局样式。水波图和仪表盘的样式注册迁回各自的包里吧

复现 测试用例，当labelType不为spider的时候，就生效了（主要原因还是spiderLabel的实现不是通过register的方式 导致的）

const canvasDiv = createCanvasDiv('canvasDiv1')
    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: smallData,
      label: {  
        visible: true,
        type: 'spider',
        style: {
          // todo 自定义连线颜色
        }
      },
      angleField: 'y',
      colorField: 'x',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 1,
      title: {
        text: '饼图 - spider label',
      },
      description: {
        text: '1.label默认展示为“colorField value(上)angleField value(下，默认换行显示)”; \n2.[todo]label连线颜色设为灰色; \n3.[todo]label添加hover交互; \n',
      },
      legend: {
        visible: false,
      },
      events: {
        'label:mousemove': (...args) => {
          console.info('todo: spiderLabel 设置该事件的时候 会不生效');
        },
      }
    });

    pie.render();

G2版本：v3.6.x
G版本：3.5-prepare

内容上

1. 事件名建议全部采用小写，同 DOM 事件命名风格保持一致（这属于 API 方面的建议）
2. 对于属性支持回调函数的使用描述过于简单，应该给出具体的 API，包括入参以及返回结果等，最好也有 demo。另外类似描述对象类型中包含的各个属性，使用表格或者代码的方式会不会比现在的列表方式更好？
   
3. 在每一篇图表的使用文档中，是否应该都配备适当的 demo?

格式上

1. 中文文案排版指南，详见 PR，中英文之间加个空格呀~~~注意中英文标点符号
2. 代码片段需要注明使用的编程语言，便于代码高亮显示
3. 文档中的代码也需要注意 code style，看有的数据实例直接就这样写了..
   

未完待续...

如题。

环图，legend 被遮挡。
设置 responsive 后，环消失，只剩 legend。

我的理解是正常用户传入，如果不传就获取，获取不到才是默认值

把之前的搬过来......

• plot container只支持dom

• 先声明一个 absoluteChart， 然后 new 两个，灌入不同数据然后渲染

具体实现的讨论：

目前，配置label.textStyle是不生效的，看了 g2的labelController 层，并没有使用用户配置labelOptions.textStyle, 是不打算 开放 label.textStyle的配置吗?只能在 theme 中配置全局
label.textStyle? 这么做的原因是什么? @paleface001

复现测试单例如下:

    const pie = new Pie(canvasDiv, {
      width: 600,
      height: 600,
      data: largeData,
      label: {  
        visible: true,
        type: 'custom-pie',
        formatter: (text, item, index) => {
          const origin = item._origin;
          return `${origin['type']}\n\n${origin['value']}`;
        },
        //  🔥 此处的配置是无效的 🔥
        textStyle: {
          lineHeight: 16,
          fill: 'red',
        }
      },
      angleField: 'value',
      colorField: 'type',
      padding: [0, 0, 0, 0],
      animation: false,
      radius: 0.75,
      innerRadius: 0.25,
      title: {
        text: '饼图 - custom pie label',
      },
      description: {
        text: '1. 量级大,100条数据;',
      },
      legend: {
        visible: false,
      },
    });

图表默认配置优化

https://yuque.antfin-inc.com/antv/g2-4/kclgfa

每一个图表的TS类型定义

使用TS改写默认的line-basic DEMO，会有TS类型错误

const cfg: LineConfig = {
  padding: 'auto',
  data: [{ x: 'a', y: 1 }, { x: 'b', y: 2 }],
  xField: 'x',
  yField: 'y',
};

const plot = new Line(document.getElementById('canvas'), cfg);

问题：

1. cfg定义报错
   

2. cfg类型LineConfig与Line的构造函数参数要求的ViewLayer不一致
   

https://github.com/antvis/g2plot/blob/e507f2ed127cd9a0c164ba3c4f561ddded358ef0/src/base/Plot.ts#L201

这里获取的是 plotBBox，和plotRange含义可以一致？
range是否可以理解为一个object对象，而不是bbox对象？

https://github.com/antvis/g2plot/blob/master/demos/stackBar.html#L92

Stackar => StackBar

这边应该用 shapeData 里的数据
https://github.com/antvis/g2plot/blob/770b9f64d426da0fa7d520c2250714d2b8893ce6/src/plots/line/animation/clipInWithData.ts#L20
另 同一文件 96 行的 getPositionByRatio 方法可以用 g 里 path.getPoint(ratio) 替换。这样不管是折线还是 smooth 贝塞尔线条都是准的。

折线图配置 point 样式后，交互的时候，图形样式会覆盖用户配置样式。
需要改 plot 底层。

如下配置项。
hover 时，
期待的效果：点的填充色时粉色，边框色黑色，高亮，移出后恢复。
实际效果：点的填充色变成了主题中的默认色，边框色为红色，移出后有时还不能恢复。

point: {
        visible: true,
        color: 'red',
        size: 5,
        style: {
          fillStyle: 'pink',
          lineWidth: 2,
          strokeStyle: 'black',
        },
      },

原始图表：

hover时，鼠标移动到点上：

鼠标移出后

没有看到和G2Plot有关的任何文档，在哪里可以看到？

水滴图的 defaultColor 不是主题的defaultColor

• Bar 缺colorField
• Column 缺colorField
• Line缺lineSize

柱状图，条形图，原color属性是用别的替代了，还是bug了。

color为一个颜色数组的时候全部显示第一个色值。

试运行 torch --compile --interactive ./__tests__/unit/pie.spec2.js
执行结果如下图，内半径设置无效

https://github.com/antvis/g2plot/blob/master/docs/advanced/stateAndChartsConnetion.zh-CN.md

2). 状态量的更新和更新事假的分发

应该为“
2). 状态量的更新和更新事件的分发
”

看图，xAxis 为 undefined 时，挂了，需要给个默认类型。

1. label type= spider的formatter 参数需要与ounter inner的保持一致

2. label formatter 需要饼图计算后的百分比数据