要显示多个
折线图并避免它们脱离画布，您可以使用 `theme` 属性来调整 G2Plot 的主题样式。下面是一个示例代码，演示如何创建一个堆叠柱线
图表，并显示多个
折线图。
```jsx
import React, { Component } from 'react';
import { StackedColumnLine } from '@antv/g2plot';
class StackedColumnLineChart extends Component {
constructor(props) {
super(props);
this.chartRef = React.createRef();
}
componentDidMount() {
const data = [
{ year: '1991', value: 3, type: 'sales' },
{ year: '1992', value: 4, type: 'sales' },
{ year: '1993', value: 3.5, type: 'sales' },
{ year: '1994', value: 5, type: 'sales' },
{ year: '1995', value: 4.9, type: 'sales' },
{ year: '1996', value: 6, type: 'sales' },
{ year: '1997', value: 7, type: 'sales' },
{ year: '1998', value: 9, type: 'sales' },
{ year: '1999', value: 13, type: 'sales' },
{ year: '1991', value: 1, type: 'profits' },
{ year: '1992', value: 3, type: 'profits' },
{ year: '1993', value: 1.5, type: 'profits' },
{ year: '1994', value: 2, type: 'profits' },
{ year: '1995', value: 1.9, type: 'profits' },
{ year: '1996', value: 4, type: 'profits' },
{ year: '1997', value: 5, type: 'profits' },
{ year: '1998', value: 8, type: 'profits' },
{ year: '1999', value: 10, type: 'profits' },
];
const lineTheme = {
geometries: {
line: {
style: {
lineWidth: 2,
},
},
},
};
const chart = new StackedColumnLine(this.chartRef.current, {
data,
xField: 'year',
yField: 'value',
xAxis: {
label: {
autoRotate: false,
},
},
yAxis: {
label: {
formatter: (value) => `${value}k`,
},
},
seriesField: 'type',
legend: {
position: 'top',
},
theme: {
styleSheet: {
...lineTheme,
},
},
});
chart.render();
}
componentWillUnmount() {
if (this.chart) {
this.chart.destroy();
}
}
render() {
return <div ref={this.chartRef}></div>;
}
}
export default StackedColumnLineChart;
```
在上面的代码中，我们定义了一个 `lineTheme` 对象，用于调整
折线图的样式。然后，我们在创建
图表实例时，将 `lineTheme` 对象添加到主题中。这样，我们就可以根据需要调整
折线图的线宽和样式，从而避免它们脱离画布。
另外，我们还可以通过设置 `xAxis.label.autoRotate` 属性来禁用 X 轴标签的自动旋转，以确保标签不重叠。同时，我们通过设置 `yAxis.label.formatter` 属性来自定义 Y 轴标签的格式，以便更好地显示数据。
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
1488
