G2Plot 折线图表错乱,不按顺序排列

问题描述:

问题:G2Plot 折线图表错乱,不按顺序排列
BUG如图:

在这里插入图片描述


原因分析:

问题分析:
在仔细检查了参数值时,分析没有问题的图表的 value 值类型为Number,出问题的是String类型。

有问题的图表的值:

在这里插入图片描述

没有的图表的值:

在这里插入图片描述


解决方案:

在处理数据时将value值类型转换为 Number 类型即可。
在这里插入图片描述

阅读终点,创作起航,您可以撰写心得或摘录文章要点写篇博文。去创作
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
对于 g2plot 的 dualaxes,它本身并不支持添加 slider。如果你想要添加 slider 来控制折线图的显示范围,可以考虑使用 g2plot 的其他组件来实现。 一个比较常见的做法是使用 g2plot 的 slider 组件来控制数据的筛选。具体实现可以参考以下代码: ```javascript import { Chart, registerShape } from '@antv/g2'; import { Slider } from '@antv/g2plot'; const data = [ { year: '1991', value: 3 }, { year: '1992', value: 4 }, { year: '1993', value: 3.5 }, { year: '1994', value: 5 }, { year: '1995', value: 4.9 }, { year: '1996', value: 6 }, { year: '1997', value: 7 }, { year: '1998', value: 9 }, { year: '1999', value: 13 }, ]; const chart = new Chart({ container: 'container', autoFit: true, height: 400, }); chart.data(data); chart.scale({ value: { nice: true, }, }); chart.tooltip({ showCrosshairs: true, shared: true, }); chart.axis('year', { tickLine: null, }); chart.axis('value', { position: 'right', tickLine: null, }); chart .line() .position('year*value') .style({ lineWidth: 2, }); const slider = new Slider({ container: 'slider-container', data, width: 'auto', height: 26, xAxis: 'year', yAxis: 'value', start: 0, end: 0.5, backgroundChart: { type: 'line', }, foregroundChart: { type: 'line', }, onChange: ({ startValue, endValue }) => { chart.filter('year', (val) => { const year = parseInt(val, 10); return year >= startValue && year <= endValue; }); chart.render(); }, }); slider.render(); chart.render(); ``` 在这个例子中,我们首先定义了一个折线图,并使用 g2plot 的 slider 组件来控制数据的范围。具体来说,我们通过调节 slider 的 start 和 end 参数来筛选数据,然后在 slider 的 onChange 回调函数中更新折线图的数据范围,并重新渲染图。 需要注意的是,在使用 slider 组件时,我们需要指定 backgroundChart 和 foregroundChart 参数来分别定义 slider 背景和前景的图类型。在这个例子中,我们将它们都设置为折线图。这样做的目的是为了让 slider 的滑动区域有一个可视化的效果。 另外,由于我们是在一个折线图上添加 slider,所以需要将折线图的 x 轴和 slider 的 x 轴对应起来。具体来说,我们需要在 slider 的配置中指定 xAxis 参数为 'year',这样 slider 才能正确地控制折线图的 x 轴。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风自鸣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值