Skip to content

Commit

Permalink
docs: 更新主题文档，related to #2251, #2258
Browse files Browse the repository at this point in the history
  • Loading branch information
@simaQ @hustcc
simaQ authored and hustcc committed Apr 3, 2020
1 parent 1f9b96b commit ef3e97f
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 12 deletions.
5 changes: 3 additions & 2 deletions docs/manual/developer/registertheme.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ registerTheme('newTheme', {

// Step 2: 使用
chart.theme('newTheme');
chart.render();
```

### 主题属性
Expand All @@ -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 | 柱状图最小宽度，像素值 |
Expand Down
5 changes: 3 additions & 2 deletions docs/manual/developer/registertheme.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ registerTheme('newTheme', {

// Step 2: 使用
chart.theme('newTheme');
chart.render();
```

### 主题属性
Expand All @@ -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 | 柱状图最小宽度，像素值 |
Expand Down
20 changes: 16 additions & 4 deletions docs/manual/tutorial/theme.en.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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({
Expand All @@ -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
Expand Down
20 changes: 16 additions & 4 deletions docs/manual/tutorial/theme.zh.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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({
Expand All @@ -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
Expand Down

0 comments on commit ef3e97f

Please sign in to comment.