From ef3e97f26a1455b07e495b3d7706d71b588db3a2 Mon Sep 17 00:00:00 2001 From: simaQ Date: Thu, 2 Apr 2020 11:12:00 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E6=96=87=E6=A1=A3=EF=BC=8Crelated=20to=20#2251,=20#2258?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/manual/developer/registertheme.en.md | 5 +++-- docs/manual/developer/registertheme.zh.md | 5 +++-- docs/manual/tutorial/theme.en.md | 20 ++++++++++++++++---- docs/manual/tutorial/theme.zh.md | 20 ++++++++++++++++---- 4 files changed, 38 insertions(+), 12 deletions(-) diff --git a/docs/manual/developer/registertheme.en.md b/docs/manual/developer/registertheme.en.md index ef8bfb7080..62ce021e0b 100644 --- a/docs/manual/developer/registertheme.en.md +++ b/docs/manual/developer/registertheme.en.md @@ -20,6 +20,7 @@ registerTheme('newTheme', { // Step 2: 使用 chart.theme('newTheme'); +chart.render(); ``` ### 主题属性 @@ -31,8 +32,8 @@ chart.theme('newTheme'); | `defaultColor`  | string | 主题色 | | `padding` | number | number[] | 'auto' | chart padding 配置，默认为 'auto' | | `fontFamily` | string | 图表字体 | -| `colors` | string[] | 分类颜色色板，分类个数小于 10 时使用 | -| `colors_20` | string[] | 分类颜色色板，分类个数大于 10 时使用 | +| `colors10` | string[] | 分类颜色色板，分类个数小于 10 时使用 | +| `colors20` | string[] | 分类颜色色板，分类个数大于 10 时使用 | | `columnWidthRatio` | number | 一般柱状图宽度占比，0 - 1 范围数值 | | `maxColumnWidth` | number | 柱状图最大宽度，像素值 | | `minColumnWidth` | number | 柱状图最小宽度，像素值 | diff --git a/docs/manual/developer/registertheme.zh.md b/docs/manual/developer/registertheme.zh.md index ef8bfb7080..62ce021e0b 100644 --- a/docs/manual/developer/registertheme.zh.md +++ b/docs/manual/developer/registertheme.zh.md @@ -20,6 +20,7 @@ registerTheme('newTheme', { // Step 2: 使用 chart.theme('newTheme'); +chart.render(); ``` ### 主题属性 @@ -31,8 +32,8 @@ chart.theme('newTheme'); | `defaultColor`  | string | 主题色 | | `padding` | number | number[] | 'auto' | chart padding 配置，默认为 'auto' | | `fontFamily` | string | 图表字体 | -| `colors` | string[] | 分类颜色色板，分类个数小于 10 时使用 | -| `colors_20` | string[] | 分类颜色色板，分类个数大于 10 时使用 | +| `colors10` | string[] | 分类颜色色板，分类个数小于 10 时使用 | +| `colors20` | string[] | 分类颜色色板，分类个数大于 10 时使用 | | `columnWidthRatio` | number | 一般柱状图宽度占比，0 - 1 范围数值 | | `maxColumnWidth` | number | 柱状图最大宽度，像素值 | | `minColumnWidth` | number | 柱状图最小宽度，像素值 | diff --git a/docs/manual/tutorial/theme.en.md b/docs/manual/tutorial/theme.en.md index a54e13f82e..1aa3e3fde7 100644 --- a/docs/manual/tutorial/theme.en.md +++ b/docs/manual/tutorial/theme.en.md @@ -20,7 +20,7 @@ G2 4.0 默认提供了一种内置主题，命名为 'default'，如果内置了 ```typescript const chart1 = new Chart({ container: 'container', - theme: 'antv', // 使用命名为 'antv' 的主题 + theme: 'dark', // 使用命名为 'dark' 的主题 }); const chart2 = new Chart({ @@ -34,19 +34,27 @@ const chart2 = new Chart({ 2. 通过 `chart.theme()`  接口配置 ```typescript -chart1.theme('antv'); // 切换全套主题 +// 在创建图表的时候，就切换主题 +chart1.theme('dark'); +chart1.render(); // 渲染图表 +// 图表渲染后，动态切换主题 chart2.theme({ defaultColor: 'red', }); // 修改内置主题的某些配置 +chart2.render(true); ``` +**重要** + +`chart.theme()` 声明之后，必须调用 `chart.render()` / `chart.render(true)` 方可生效，如果是动态切换主题场景，建议调用 `chart.render(true)`。 + 3. 在 view 上配置主题 ```typescript // 在创建 view 的时候声明主题 const view1 = chart.createView({ - theme: 'antv', + theme: 'dark', }); // 在创建 view 的时候修改主题 const view2 = chart.createView({ @@ -56,13 +64,17 @@ const view2 = chart.createView({ }); // 通过 theme() 接口声明 -view1.theme('antv'); +view1.theme('dark'); view2.theme({ defaultColor: 'red', }); ``` +**重要** + +`view.theme()` 声明之后，必须调用 `chart.render()` / `chart.render(true)` 方可生效，如果是动态切换主题场景，建议调用 `chart.render(true)` + 4. 在 Geometry 上配置主题 ```typescript diff --git a/docs/manual/tutorial/theme.zh.md b/docs/manual/tutorial/theme.zh.md index a54e13f82e..1aa3e3fde7 100644 --- a/docs/manual/tutorial/theme.zh.md +++ b/docs/manual/tutorial/theme.zh.md @@ -20,7 +20,7 @@ G2 4.0 默认提供了一种内置主题，命名为 'default'，如果内置了 ```typescript const chart1 = new Chart({ container: 'container', - theme: 'antv', // 使用命名为 'antv' 的主题 + theme: 'dark', // 使用命名为 'dark' 的主题 }); const chart2 = new Chart({ @@ -34,19 +34,27 @@ const chart2 = new Chart({ 2. 通过 `chart.theme()`  接口配置 ```typescript -chart1.theme('antv'); // 切换全套主题 +// 在创建图表的时候，就切换主题 +chart1.theme('dark'); +chart1.render(); // 渲染图表 +// 图表渲染后，动态切换主题 chart2.theme({ defaultColor: 'red', }); // 修改内置主题的某些配置 +chart2.render(true); ``` +**重要** + +`chart.theme()` 声明之后，必须调用 `chart.render()` / `chart.render(true)` 方可生效，如果是动态切换主题场景，建议调用 `chart.render(true)`。 + 3. 在 view 上配置主题 ```typescript // 在创建 view 的时候声明主题 const view1 = chart.createView({ - theme: 'antv', + theme: 'dark', }); // 在创建 view 的时候修改主题 const view2 = chart.createView({ @@ -56,13 +64,17 @@ const view2 = chart.createView({ }); // 通过 theme() 接口声明 -view1.theme('antv'); +view1.theme('dark'); view2.theme({ defaultColor: 'red', }); ``` +**重要** + +`view.theme()` 声明之后，必须调用 `chart.render()` / `chart.render(true)` 方可生效，如果是动态切换主题场景，建议调用 `chart.render(true)` + 4. 在 Geometry 上配置主题 ```typescript