diff --git a/examples/area/basic/design.zh.md b/examples/area/basic/design.zh.md index 7c3053c985..ca3ed535ef 100644 --- a/examples/area/basic/design.zh.md +++ b/examples/area/basic/design.zh.md @@ -18,11 +18,11 @@ title: 设计规范 ## 用法建议 - + ## 元素 - + - X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。 - Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 diff --git a/examples/area/percentageArea/design.zh.md b/examples/area/percentageArea/design.zh.md index cf92e8a576..8a691aed6d 100644 --- a/examples/area/percentageArea/design.zh.md +++ b/examples/area/percentageArea/design.zh.md @@ -2,4 +2,30 @@ title: 设计规范 --- -暂无。 +## 何时使用 + +面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。 +堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。 + +## 数据类型 + +| 图表类型 | 面积图 | +| ---------------- | -------------------------------- | +| 适合的数据 | 两个连续字段数据 | +| 功能 | 观察数据变化`趋势` | +| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 | +| 适合的数据条数 | 大于两条 | + +## 用法建议 + + + +## 元素 + + + +- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。 +- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。 +- 标签：用来解释数据点的值。 +- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/area/stack/design.zh.md b/examples/area/stack/design.zh.md index 6d7c247589..8a691aed6d 100644 --- a/examples/area/stack/design.zh.md +++ b/examples/area/stack/design.zh.md @@ -2,4 +2,30 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +面积图可用来展示连续性数据，可很好地表示趋势、累积、减少以及变化。 +堆叠面积图更擅于展示部分和整体之间的关系或趋势，而不是传达特定的值。 + +## 数据类型 + +| 图表类型 | 面积图 | +| ---------------- | -------------------------------- | +| 适合的数据 | 两个连续字段数据 | +| 功能 | 观察数据变化`趋势` | +| 数据与图形的映射 | 两个连续字段分别映射到横轴和纵轴 | +| 适合的数据条数 | 大于两条 | + +## 用法建议 + + + +## 元素 + + + +- X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。 +- Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +- 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。 +- 标签：用来解释数据点的值。 +- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/basic/design.zh.md b/examples/bar/basic/design.zh.md index 6d7c247589..9de80a2b2a 100644 --- a/examples/bar/basic/design.zh.md +++ b/examples/bar/basic/design.zh.md @@ -2,4 +2,29 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/group/design.zh.md b/examples/bar/group/design.zh.md index 6d7c247589..e62b6f0914 100644 --- a/examples/bar/group/design.zh.md +++ b/examples/bar/group/design.zh.md @@ -2,4 +2,29 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/percentageStack/design.zh.md b/examples/bar/percentageStack/design.zh.md index 6d7c247589..9be42d693b 100644 --- a/examples/bar/percentageStack/design.zh.md +++ b/examples/bar/percentageStack/design.zh.md @@ -2,4 +2,29 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/bar/stack/design.zh.md b/examples/bar/stack/design.zh.md index 6d7c247589..9be42d693b 100644 --- a/examples/bar/stack/design.zh.md +++ b/examples/bar/stack/design.zh.md @@ -2,4 +2,29 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势 | + + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。 +* Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/column/basic/design.zh.md b/examples/column/basic/design.zh.md index 6d7c247589..d13b52c947 100644 --- a/examples/column/basic/design.zh.md +++ b/examples/column/basic/design.zh.md @@ -2,4 +2,28 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 | + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。 +* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/column/group/design.zh.md b/examples/column/group/design.zh.md index 6d7c247589..d623e37e3b 100644 --- a/examples/column/group/design.zh.md +++ b/examples/column/group/design.zh.md @@ -2,4 +2,28 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 | + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。 +* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/column/percentageStack/design.zh.md b/examples/column/percentageStack/design.zh.md index 6d7c247589..c86db8254f 100644 --- a/examples/column/percentageStack/design.zh.md +++ b/examples/column/percentageStack/design.zh.md @@ -2,4 +2,28 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 | + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。 +* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/column/stack/design.zh.md b/examples/column/stack/design.zh.md index 6d7c247589..c86db8254f 100644 --- a/examples/column/stack/design.zh.md +++ b/examples/column/stack/design.zh.md @@ -2,4 +2,28 @@ title: 设计规范 --- -设计规范 +## 何时使用 + +柱状图通过垂直柱子长短对比数值大小，适用于对比一组或者多组分类数据。 + +## 数据类型 + +| 适合的数据 | 「一组或多组分类数据」+「一组或者多组对应的数值」 | +| --- | --- | +| 功能 | 对比分类数据的数值大小 | +| 数据与图形的映射 | 分类数据字段映射到横轴的位置，连续数据字段映射到矩形的高度，分类数据也可以设置颜色增强分类的区分度 | +| 适合的数据条数 | 分类数据不宜过多，不建议超过 20 条，如有多组分类数据，不建议超过 10 组 | + +## 用法建议 + + + +## 元素 + + + +* X 轴：通常对应分类数据，值为文本，调用连续数据 X 轴。 +* Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 +* 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。 +* 标签：用来解释数据点的值。 +* 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。 diff --git a/examples/general/axis/design.zh.md b/examples/general/axis/design.zh.md index 6d7c247589..2986fd6492 100644 --- a/examples/general/axis/design.zh.md +++ b/examples/general/axis/design.zh.md @@ -2,4 +2,69 @@ title: 设计规范 --- -设计规范 +## 定义 + +轴是用来定义一个坐标系的一组直线或一组曲线。 + +## 何时使用 + +目的是显示数据中的尺寸。常在：折线图、面积图，条形图、柱形图、散点图等图表中使用 + +## 元素 + +轴的常见元素包括：轴线、刻度线、轴上的网格线、文字标签和文字标题 + + + +## 轴标题 + +**何时使用**：通常用来描述当前轴的主题 +**设计建议**：在图表内容无法对当前轴的主题和单位进行准确描述时，建议加上轴标题，且后跟数据单位。 + +**例**：生产总值（亿元） + + + +## 轴标签 + +**设计建议**： +可根据图表类型设置轴标签是否显示、旋转角度以及显示间隔。 + +**默认方案**： +连续轴、时间轴默认自动抽样 + 不旋转；分类轴默认自动旋转 + 自动省略。 + + + +## 轴元素的显示策略 + +**设计建议**： +轴上所有的元素可根据图表类型设置不同的显示策略。 + +**1、折线、面积图为例** + + + +**2、柱状图为例** + + + +**3、条形图为例** + + + +**4、散点图为例** + + + +**另外：** +上面 4 个设计建议中提到的，轴标签「若图形区域内有数据标签」，则轴标签可以考虑隐藏，如下图： + + \ No newline at end of file diff --git a/examples/line/basic/design.zh.md b/examples/line/basic/design.zh.md index 67b70b58f4..b5b6855147 100644 --- a/examples/line/basic/design.zh.md +++ b/examples/line/basic/design.zh.md @@ -16,11 +16,11 @@ title: 设计规范 ## 用法建议 - + ## 元素 - + - X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。 - Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 diff --git a/examples/line/multiple/design.zh.md b/examples/line/multiple/design.zh.md index 3b746ba9bf..3e0340420d 100644 --- a/examples/line/multiple/design.zh.md +++ b/examples/line/multiple/design.zh.md @@ -16,11 +16,11 @@ title: 设计规范 ## 用法建议 - + ## 元素 - + - X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。 - Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。 diff --git a/package.json b/package.json index 14be3e47d0..cea11029ab 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,7 @@ "tslib": "^1.10.0" }, "devDependencies": { - "@antv/gatsby-theme-antv": "^0.9.61", + "@antv/gatsby-theme-antv": "^0.9.77", "@types/jest": "^24.0.23", "@typescript-eslint/eslint-plugin": "^2.0.0", "@typescript-eslint/parser": "^2.0.0", diff --git a/site/pages/index.zh.tsx b/site/pages/index.zh.tsx index a2caf9c32b..cc229fc114 100644 --- a/site/pages/index.zh.tsx +++ b/site/pages/index.zh.tsx @@ -60,13 +60,13 @@ const IndexPage = () => { const cases = [ { logo: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*2Ij9T76DyCcAAAAAAAAAAABkARQnAQ', + 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*HZrrSI4yZYQAAAAAAAAAAABkARQnAQ', title: t('图表实验室'), description: t('来这里尝试一下我们正在开发中的高级图表功能'), link: 'examples/advanced/connection', image: - 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*oCd7Sq3N-QEAAAAAAAAAAABkARQnAQ', + 'https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*SXLtRaVPGvMAAAAAAAAAAABkARQnAQ', }, ];