8000 docs: 改造「核心概念 - 转换（Transform）- stackY」文档 by mingcheng · Pull Request #6777 · antvis/G2 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

docs: 改造「核心概念 - 转换（Transform）- stackY」文档 #6777

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Apr 21, 2025
Merged

docs: 改造「核心概念 - 转换（Transform）- stackY」文档 #6777

merged 3 commits into from
Apr 21, 2025

Conversation

mingcheng
Copy link
Contributor

fixed #6685

Checklist
  • npm test passes
  • benchmarks are included
  • commit message follows commit guidelines
  • documents are updated
Description of change

docs: update stackY transform documentation 📚

  • Revise stackY transform documentation for clarity and detail.
  • Add comprehensive examples for stacked charts including bar, area, and normalized area.
  • Include detailed usage scenarios and configuration options.
  • Enhance visual representation with relevant image references.
  • Update option tables with precise descriptions and default values.

@mingcheng mingcheng marked this pull request as ready for review April 15, 2025 03:26
@coveralls
Copy link
coveralls commented Apr 15, 2025 •
edited
Loading

Pull Request Test Coverage Report for Build 14573090278

Details

  • 0 of 0 changed or added relevant lines in 0 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage remained the same at 86.758%
Totals Coverage Status
Change from base Build 14571927174: 0.0%
Covered Lines: 10713
Relevant Lines: 11968
💛 - Coveralls

@interstellarmt
Copy link
Contributor

感谢您的贡献 🎉
以下是一些建议，为了transform部分的文档格式大致统一～

  1. 选项 => 配置项，移动到示例的上面，总体顺序为概述、使用场景、配置项、示例。
  2. 示例中的简单堆叠柱状图移动到使用场景最后，作为直观的体现，类似于下面的效果：
    image
    下面是一个小tips，可以使用
    image

来在网页中嵌入可交互的代码示例，在一些需要交互的例子里可能会有用～

@mingcheng
Copy link
Contributor Author

来在网页中嵌入可交互的代码示例，在一些需要交互的例子里可能会有用

我使用 ts | ob 现实语法错误，这块有无详细的说明文档？的确在有必要的时候开启体验会好一点

其他都已经调整，请有空继续 review 下，感谢～🙏

@interstellarmt
Copy link
Contributor

其他的都没什么问题了，可以把简单的那个例子加到使用场景里面，
js | ob是解析的格式，不能写成ts 具体实现可以参考 https://github.com/antvis/dumi-theme-antv/blob/v3/src/plugin/rehypeObservable.ts

@mingcheng
Copy link
Contributor Author

其他的都没什么问题了，可以把简单的那个例子加到使用场景里面， js | ob是解析的格式，不能写成ts 具体实现可以参考 https://github.com/antvis/dumi-theme-antv/blob/v3/src/plugin/rehypeObservable.ts

Screenshot 2025-04-21 at 19 25 04

根据语法我调整成 js|ob 有类似的错误，这块如何处理？

@interstellarmt
Copy link
Contributor

因为要在网页端展示，所以要修改一下引入方式：
原始代码：

import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });

chart.options({
  type: "area",
  autoFit: true,
  data: {
    type: "fetch",
    value: "https://assets.antv.antgroup.com/g2/unemployment-by-industry.json",
  },
  encode: { x: (d) => new Date(d.date), y: "unemployed", color: "industry" },
  transform: [{ type: "stackY" }, { type: "normalizeY" }],
  tooltip: { items: [{ channel: "y0", valueFormatter: ".3f" }] },
});

chart.render();

修改后：

const chart = new G2.Chart();

chart.options({
  type: "area",
  autoFit: true,
  data: {
    type: "fetch",
    value: "https://assets.antv.antgroup.com/g2/unemployment-by-industry.json",
  },
  encode: { x: (d) => new Date(d.date), y: "unemployed", color: "industry" },
  transform: [{ type: "stackY" }, { type: "normalizeY" }],
  tooltip: { items: [{ channel: "y0", valueFormatter: ".3f" }] },
});

chart.render();

return chart.getContainer();

@mingcheng
Copy link
Contributor Author

因为要在网页端展示，所以要修改一下引入方式： 原始代码：

import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });

chart.options({
  type: "area",
  autoFit: true,
  data: {
    type: "fetch",
    value: "https://assets.antv.antgroup.com/g2/unemployment-by-industry.json",
  },
  encode: { x: (d) => new Date(d.date), y: "unemployed", color: "industry" },
  transform: [{ type: "stackY" }, { type: "normalizeY" }],
  tooltip: { items: [{ channel: "y0", valueFormatter: ".3f" }] },
});

chart.render();

修改后：

const chart = new G2.Chart();

chart.options({
  type: "area",
  autoFit: true,
  data: {
    type: "fetch",
    value: "https://assets.antv.antgroup.com/g2/unemployment-by-industry.json",
  },
  encode: { x: (d) => new Date(d.date), y: "unemployed", color: "industry" },
  transform: [{ type: "stackY" }, { type: "normalizeY" }],
  tooltip: { items: [{ channel: "y0", valueFormatter: ".3f" }] },
});

chart.render();

return chart.getContainer();

补充下，根据其他的文档还需要个闭包给包起来，避免作用域污染。完整的示例代码如下

``` js | ob
(() => { 
  const chart = new G2.Chart();

  chart.options({
    type: "interval",
    autoFit: true,
    data: [
      { category: "A", value: 10, type: "X" },
      { category: "A", value: 20, type: "Y" },
      { category: "B", value: 15, type: "X" },
      { category: "B", value: 25, type: "Y" },
    ],
    encode: { x: "category", y: "value", color: "type" },
    transform: [{ type: "stackY" }],
  });

  chart.render();
  return chart.getContainer();
})();

@interstellarmt @mingcheng
docs: update stackY transform documentation (#6780) 📚
6c30b73 
- Revise `stackY` transform documentation for clarity and detail.
- Add comprehensive examples for stacked charts including bar, area, and normalized area.
- Include detailed usage scenarios and configuration options.
- Enhance visual representation with relevant image references.
- Update option tables with precise descriptions and default values.
@interstellarmt @mingcheng
docs: enhance stackY transform documentation with detailed examples 📚
162f11f 
- Update `stackY` transform doc with clearer explanations.
- Add detailed configuration options and default values.
- Include practical examples for stacked bar charts.
- Refine grouping and ordering logic descriptions.
- Remove redundant content for better readability.
@interstellarmt @mingcheng
docs: update stackY transform documentation with examples 📚
daf9656 
- Revise normalized stacked area chart explanation with updated code snippets.
- Add detailed examples for stacked area and column charts.
- Include links to online chart demos for reference.
- Refine content for clarity and remove redundant text.
@mingcheng
Copy link
Contributor Author

此部分文档已更新，请检查谢谢🙏

@mingcheng mingcheng merged commit c3978b3 into v5 Apr 21, 2025
5 of 6 checks passed
@mingcheng mingcheng deleted the docs-mark-stackY branch April 21, 2025 15:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@interstellarmt interstellarmt interstellarmt approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Docs]: 改造文档「核心概念 - 转换（Transform）- stackY」
3 participants
@mingcheng @coveralls @interstellarmt
0