antv g2plot 2.4.7版本堆叠柱线图表,有slider但是slider一变化折线的y轴往下偏,
时间: 2024-02-22 17:55:49 浏览: 136
可滑动的折线图
针对您的问题,可能是由于 slider 变化后,折线图的数据范围与柱状图的数据范围不一致,导致折线图的 y 轴往下偏移。您可以尝试在 slider 的 `slidermove` 事件中,动态设置折线图的 y 轴最大值,使其与柱状图的 y 轴范围保持一致,从而解决折线图偏移的问题。具体实现可以参考以下示例代码:
```javascript
const plot = new G2Plot.StackedColumnLine(chartDiv, {
data: data,
xField: 'date',
yField: ['value1', 'value2', 'value3'],
lineSeriesField: 'type',
yAxis: {
label: {
formatter: (value) => {
return `${value}%`;
},
},
min: 0,
max: 100, // 设置 y 轴最大值为 100
},
slider: {
start: 0.1,
end: 0.9,
onSlidermove: (evt) => {
// 获取 slider 的当前范围
const { start, end } = evt;
// 获取当前范围内的 y 轴最大值
const maxValue = Math.max(
...data
.map((item) => {
const value = item.value1 + item.value2 + item.value3;
if (item.date >= startDate && item.date <= endDate) {
return value;
}
return 0;
})
);
// 设置 y 轴最大值
plot.update({
yAxis: {
max: maxValue,
},
});
},
},
});
plot.render();
```
在上述代码中,我们在 slider 的 `slidermove` 事件中,动态获取当前范围内的 y 轴最大值,并设置折线图的 y 轴最大值为该值,从而使得折线图的 y 轴范围与柱状图的 y 轴范围保持一致,解决折线图偏移的问题。
希望这些信息能够帮助到您,如果您还有其他问题,请随时向我提问。
阅读全文