Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 63 additions & 1 deletion docs/assets/api/en/API/vchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -763,7 +763,9 @@ getCurrentThemeName: () => string;

### setCurrentTheme

**asynchronous method**, set the current Theme.
**Asynchronous method**, set the current Theme.

**Note: If the `theme` property is configured in the chart spec, the `spec.theme` has higher priority.**

```ts
/**
Expand All @@ -774,6 +776,66 @@ getCurrentThemeName: () => string;
setCurrentTheme: (name: string) => Promise<IVChart>;
```

Usage example:

```javascript livedemo
// Define custom theme
const customTheme = {
colorScheme: {
default: [
'#FF6B6B',
'#4ECDC4',
'#45B7D1',
'#FFA07A',
'#98D8C8',
'#F7DC6F',
'#BB8FCE',
'#85C1E2'
]
},
series: {
bar: {
barMaxWidth: 20,
label: {
visible: true,
position: 'top'
}
}
}
};

// Register theme
VChart.ThemeManager.registerTheme('myCustomTheme', customTheme);

const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ type: 'A', value: 120 },
{ type: 'B', value: 200 },
{ type: 'C', value: 150 },
{ type: 'D', value: 80 }
]
}
],
xField: 'type',
yField: 'value'
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Set theme through instance method
vchart.setCurrentTheme('myCustomTheme');
```

**Note**:
- Before using the `setCurrentTheme` method, you need to register the theme first through `VChart.ThemeManager.registerTheme()`
- This method is asynchronous and returns a Promise, you can use `await` or `.then()` to handle it
- If the `theme` property is configured in the chart spec, the theme in the spec has higher priority

### setTooltipHandler

When the configuration item cannot meet the display needs of the tooltip, we also provide the ability to customize the tooltip. You can configure `TooltipHandler` To override the default tooltip presentation logic.
Expand Down
60 changes: 60 additions & 0 deletions docs/assets/api/zh/API/vchart.md
Original file line number Diff line number Diff line change
Expand Up @@ -787,6 +787,66 @@ getCurrentThemeName: () => string;
setCurrentTheme: (name: string) => Promise<IVChart>;
```

使用示例:

```javascript livedemo
// 定义自定义主题
const customTheme = {
colorScheme: {
default: [
'#FF6B6B',
'#4ECDC4',
'#45B7D1',
'#FFA07A',
'#98D8C8',
'#F7DC6F',
'#BB8FCE',
'#85C1E2'
]
},
series: {
bar: {
barMaxWidth: 20,
label: {
visible: true,
position: 'top'
}
}
}
};

// 注册主题
VChart.ThemeManager.registerTheme('myCustomTheme', customTheme);

const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{ type: 'A', value: 120 },
{ type: 'B', value: 200 },
{ type: 'C', value: 150 },
{ type: 'D', value: 80 }
]
}
],
xField: 'type',
yField: 'value'
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// 通过实例方法设置主题
vchart.setCurrentTheme('myCustomTheme');
```

**注意**:
- 使用 `setCurrentTheme` 方法前,需要先通过 `VChart.ThemeManager.registerTheme()` 注册主题
- 该方法为异步方法,返回 Promise,可以使用 `await` 或 `.then()` 处理
- 如果图表 spec 中配置了 `theme` 属性,则 spec 中的主题优先级更高

### setTooltipHandler

当配置项无法满足 tooltip 的展示需求时,我们还提供了自定义 tooltip 的能力。可以通过配置 `TooltipHandler` 来覆盖默认 tooltip 展示逻辑。
Expand Down
Loading
Loading