G2Plot icon indicating copy to clipboard operation
G2Plot copied to clipboard

🥰 [FEATURE] 散点图需要连接线

Open HoytRen opened this issue 3 years ago • 3 comments

🥰 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]

比如这种效果 image

HoytRen avatar Aug 26 '22 15:08 HoytRen

另外,需要能将点分组,以便显示多条线。或者某些组需要连线,而另一些组可能不需要。比如标记的一些异常点,就不需要连上线。

HoytRen avatar Aug 26 '22 16:08 HoytRen

感觉就是折线图啊,有形象点的例子吗?

mapinxue avatar Aug 27 '22 12:08 mapinxue

折线图和散点图的区别在于,折线图每个点的横坐标间隔是固定的(即使有个别点缺失),输入的 X 值只是显示用的标签,和点的位置无关,最多表示点的顺序。而散点图输入的 X 值是在轴上的位置,点和点的 X 间隔是输入值确定的。所以,两种图无法相互替代,不论看上去是不是都是一条线。

HoytRen avatar Aug 28 '22 04:08 HoytRen

是这个案例吗?

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();

image

hustcc avatar May 23 '23 02:05 hustcc