G2Plot
G2Plot copied to clipboard
🥰 [FEATURE] 散点图需要连接线
🥰 Features description [Please make everyone to understand it]
现在散点图就只能画点,不能像Excel那样,按横坐标从小到大,用折线或者曲线把点串联起来。
🏞 What problem does this feature solve
采样间隔不稳定的序列数据,或者剔除了异常值的数据,是无法用折线图表示的。而没有连接线的话,看上去非常头大,而且不同系列难以互相比较。
🧐 What does the proposed API look like
增加一组参数,控制如何把散点串起来。线型啊,线条颜色啊,粗细等等。
🚑 Any additional [like screenshots]
比如这种效果

另外,需要能将点分组,以便显示多条线。或者某些组需要连线,而另一些组可能不需要。比如标记的一些异常点,就不需要连上线。
感觉就是折线图啊,有形象点的例子吗?
折线图和散点图的区别在于,折线图每个点的横坐标间隔是固定的(即使有个别点缺失),输入的 X 值只是显示用的标签,和点的位置无关,最多表示点的顺序。而散点图输入的 X 值是在轴上的位置,点和点的 X 间隔是输入值确定的。所以,两种图无法相互替代,不论看上去是不是都是一条线。
是这个案例吗?
import { Line } 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 line = new Line('container', {
data,
xField: 'year',
yField: 'value',
label: {},
smooth: true,
point: {
size: 5,
shape: 'circle',
style: {
fill: '#5B8FF9',
stroke: '#5B8FF9',
lineWidth: 2,
},
},
tooltip: { showMarkers: false },
state: {
active: {
style: {
shadowBlur: 4,
stroke: '#000',
fill: 'red',
},
},
},
interactions: [{ type: 'marker-active' }],
});
line.render();