antv g2plot 2.4.7版本画折柱图带有slider,每次slider变化,折线图就脱离出去,应该怎么写chart
时间: 2024-02-21 11:02:22 浏览: 150
你可以按照以下步骤来创建带有滑块的折柱图:
1. 导入需要的模块和数据:
```javascript
import { Chart } from '@antv/g2';
import { Slider } from '@antv/g2plot';
const data = [
{ year: '2010', value: 10 },
{ year: '2011', value: 20 },
{ year: '2012', value: 30 },
{ year: '2013', value: 40 },
{ year: '2014', value: 50 },
{ year: '2015', value: 60 },
{ year: '2016', value: 70 },
{ year: '2017', value: 80 },
{ year: '2018', value: 90 },
{ year: '2019', value: 100 },
];
```
2. 创建 Chart 对象,设置图表基本属性:
```javascript
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
chart.data(data);
```
3. 创建滑块对象,并设置滑块属性:
```javascript
const slider = new Slider({
container: 'slider',
width: 'auto',
height: 26,
start: 0,
end: 1,
data,
xAxis: 'year',
yAxis: 'value',
backgroundChart: {
type: 'line',
},
});
```
其中,`start` 和 `end` 分别表示滑块的起始值和结束值,`data` 表示滑块的数据,`xAxis` 和 `yAxis` 分别表示滑块的 x 轴和 y 轴,`backgroundChart` 表示滑块的背景图表,这里设置为折线图。
4. 创建折柱图,并设置图表属性:
```javascript
chart.interval().position('year*value');
chart.line().position('year*value');
chart.render();
```
5. 绑定滑块的 `change` 事件,每次滑块变化时更新图表数据:
```javascript
slider.on('change', (value) => {
const start = value[0];
const end = value[1];
const newData = data.slice(start * data.length, end * data.length);
chart.changeData(newData);
});
```
6. 最后,记得渲染滑块对象:
```javascript
slider.render();
```
综上所述,完整的代码如下所示:
```javascript
import { Chart } from '@antv/g2';
import { Slider } from '@antv/g2plot';
const data = [
{ year: '2010', value: 10 },
{ year: '2011', value: 20 },
{ year: '2012', value: 30 },
{ year: '2013', value: 40 },
{ year: '2014', value: 50 },
{ year: '2015', value: 60 },
{ year: '2016', value: 70 },
{ year: '2017', value: 80 },
{ year: '2018', value: 90 },
{ year: '2019', value: 100 },
];
const chart = new Chart({
container: 'container',
autoFit: true,
height: 500,
});
const slider = new Slider({
container: 'slider',
width: 'auto',
height: 26,
start: 0,
end: 1,
data,
xAxis: 'year',
yAxis: 'value',
backgroundChart: {
type: 'line',
},
});
chart.data(data);
chart.interval().position('year*value');
chart.line().position('year*value');
slider.on('change', (value) => {
const start = value[0];
const end = value[1];
const newData = data.slice(start * data.length, end * data.length);
chart.changeData(newData);
});
slider.render();
chart.render();
```
注意,这里使用的是 g2plot 依赖的 Slider 组件,需要先安装 g2plot,再按照上述步骤创建折柱图。如果你不想使用 g2plot,也可以参照上述步骤使用 g2 的自带 Slider 组件来创建滑块。
阅读全文