BizCharts多折线图字段别名,Tooltip和legnd分别设置
时间: 2024-04-22 11:24:22 浏览: 26
在 BizCharts 中,你可以使用字段别名、Tooltip 和 legend 来设置多折线图的显示。
1. 字段别名(Field Alias):你可以使用 `scale` 函数来设置字段的别名,将原始字段名映射为你想要的显示名称。例如:
```jsx
import { Chart, Line, Tooltip } from 'bizcharts';
const data = [
{ date: '2021-01-01', value1: 10, value2: 20 },
{ date: '2021-01-02', value1: 15, value2: 25 },
{ date: '2021-01-03', value1: 18, value2: 22 },
];
const scale = {
value1: {
alias: 'Value 1', // 设置 value1 字段的别名为 'Value 1'
},
value2: {
alias: 'Value 2', // 设置 value2 字段的别名为 'Value 2'
},
};
<Chart data={data} scale={scale}>
<Line position="date*value1" />
<Line position="date*value2" />
</Chart>
```
2. Tooltip:你可以使用 `<Tooltip />` 组件来设置 Tooltip 的显示内容和格式。例如:
```jsx
import { Chart, Line, Tooltip } from 'bizcharts';
const data = [
{ date: '2021-01-01', value1: 10, value2: 20 },
{ date: '2021-01-02', value1: 15, value2: 25 },
{ date: '2021-01-03', value1: 18, value2: 22 },
];
const formatter = (value, name) => `${name}: ${value}`;
<Chart data={data}>
<Line position="date*value1" />
<Line position="date*value2" />
<Tooltip formatter={formatter} />
</Chart>
```
在上面的例子中,`formatter` 函数用于自定义 Tooltip 的显示格式,将字段名和字段值格式化为你想要的形式。
3. Legend:你可以使用 `<Legend />` 组件来设置 legend 的显示内容和格式。例如:
```jsx
import { Chart, Line, Tooltip, Legend } from 'bizcharts';
const data = [
{ date: '2021-01-01', value1: 10, value2: 20 },
{ date: '2021-01-02', value1: 15, value2: 25 },
{ date: '2021-01-03', value1: 18, value2: 22 },
];
const formatter = (value) => {
return value === 'value1' ? 'Value 1' : 'Value 2';
};
<Chart data={data}>
<Line position="date*value1" />
<Line position="date*value2" />
<Tooltip />
<Legend formatter={formatter} />
</Chart>
```
在上面的例子中,`formatter` 函数用于自定义 legend 的显示内容,将字段名格式化为你想要的形式。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)