3里能不能让折线图断点连线 #2579

Closed
genius9316 opened this Issue Feb 15, 2016 · 19 comments

Comments

Projects
None yet
6 participants
@genius9316

因为项目需要,ECharts 2的时候是自己改的源代码,当某一天无数据时 前一天与后一天数据连成线,而非断开。为什么ECharts 3里不加上这个功能呢?感觉很多人都需要吧。。。

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 15, 2016

第一个折线图是自己改的
1
2

第一个折线图是自己改的
1
2

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 15, 2016

Contributor

我觉得你这边有两种解决方案:
1:可以修改数据为0,这样连线才会正常绘制
2:等待官方添加类似highcharts中的这样效果的属性

plotOptions: { series: { connectNulls: true } }

h

Contributor

SuperZDev commented Feb 15, 2016

我觉得你这边有两种解决方案:
1:可以修改数据为0,这样连线才会正常绘制
2:等待官方添加类似highcharts中的这样效果的属性

plotOptions: { series: { connectNulls: true } }

h

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 15, 2016

仅仅把数据改为‘-’也会断开。如果改为0,就会出现一个V型,巨丑无比
我是通过改EC2里的源代码,把相关的注释掉来实现连接的。。。
3
4

EC3里代码变化太大了,现在还没有找到相关的设置T.T

仅仅把数据改为‘-’也会断开。如果改为0,就会出现一个V型,巨丑无比
我是通过改EC2里的源代码,把相关的注释掉来实现连接的。。。
3
4

EC3里代码变化太大了,现在还没有找到相关的设置T.T

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 15, 2016

设置为0的结果。。。极具误导性
5

设置为0的结果。。。极具误导性
5

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 15, 2016

Contributor

@genius9316
如果你十分着急的话,请修改src/chart/line/poly.js->drawSegment函数
将源代码:
if (idx >= allLen || idx < 0 || isNaN(p[0]) || isNaN(p[1])) { break; }

修改为:
if (idx >= allLen || idx < 0) { break; } if((isNaN(p[0]) || isNaN(p[1]))&&(idx+1)<allLen) { p = points[idx+1]; }


数据:[1, '-', 15, 28, 16, 32, 64, 128, 256]
绘制情况:

a

PS:Github的code为什么换行都没有,汗,难道姿势不对?

Contributor

SuperZDev commented Feb 15, 2016

@genius9316
如果你十分着急的话,请修改src/chart/line/poly.js->drawSegment函数
将源代码:
if (idx >= allLen || idx < 0 || isNaN(p[0]) || isNaN(p[1])) { break; }

修改为:
if (idx >= allLen || idx < 0) { break; } if((isNaN(p[0]) || isNaN(p[1]))&&(idx+1)<allLen) { p = points[idx+1]; }


数据:[1, '-', 15, 28, 16, 32, 64, 128, 256]
绘制情况:

a

PS:Github的code为什么换行都没有,汗,难道姿势不对?

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 15, 2016

Contributor

@pissang 也建议可以加上类似的属性。

Contributor

SuperZDev commented Feb 15, 2016

@pissang 也建议可以加上类似的属性。

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Feb 15, 2016

Contributor

连起来就代表有数据,也有误导性,可以连带 category 把数据过滤掉

Contributor

pissang commented Feb 15, 2016

连起来就代表有数据,也有误导性,可以连带 category 把数据过滤掉

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 16, 2016

@SuperZDev 改成功了~非常感谢!!

@SuperZDev 改成功了~非常感谢!!

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 16, 2016

Contributor

客气了,还有就是。其实你这个线画不画或者归零都有一定的误导性,其实我倒是觉得断开可能还是逻辑很正确的,但是非常容易让人忽略那个前面点。看了半天图才发现你前面有个。。。。还有@pissang说处理数据来实现效果,也是一种方法。

Contributor

SuperZDev commented Feb 16, 2016

客气了,还有就是。其实你这个线画不画或者归零都有一定的误导性,其实我倒是觉得断开可能还是逻辑很正确的,但是非常容易让人忽略那个前面点。看了半天图才发现你前面有个。。。。还有@pissang说处理数据来实现效果,也是一种方法。

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 16, 2016

@pissang 有时候只需要看一下趋势,具体有没有数据并不在意。想看具体数 可以把鼠标移过去看啊~
1
2
这是一个月的数据,再往后可能两个月才有一次数据,如果不连线只会看到n多个点,
很影响看趋势=。=
还有就是……用户多年养成的画图习惯,就喜欢连起来看……-。-!

@pissang 有时候只需要看一下趋势,具体有没有数据并不在意。想看具体数 可以把鼠标移过去看啊~
1
2
这是一个月的数据,再往后可能两个月才有一次数据,如果不连线只会看到n多个点,
很影响看趋势=。=
还有就是……用户多年养成的画图习惯,就喜欢连起来看……-。-!

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 16, 2016

Contributor

@genius9316 请原谅我春节综合征,改一句代码还错了一句,不能坑了你。我把数组边界判断错了,已更正。你也改下吧。。囧瑟夫

Contributor

SuperZDev commented Feb 16, 2016

@genius9316 请原谅我春节综合征,改一句代码还错了一句,不能坑了你。我把数组边界判断错了,已更正。你也改下吧。。囧瑟夫

@genius9316

This comment has been minimized.

Show comment
Hide comment
@genius9316

genius9316 Feb 16, 2016

@SuperZDev 好的好的!~~
确实断开的话逻辑上很正确,可是用户几十年的画图 读图习惯,不好改啊...

@SuperZDev 好的好的!~~
确实断开的话逻辑上很正确,可是用户几十年的画图 读图习惯,不好改啊...

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 16, 2016

Contributor

看了你给的图,我倒是觉得你这个场景是很适合断线给连起来。

Contributor

SuperZDev commented Feb 16, 2016

看了你给的图,我倒是觉得你这个场景是很适合断线给连起来。

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Feb 19, 2016

Contributor

@genius9316 @SuperZDev

可以试下显示指定 X 轴的位置,默认 X 轴是类目轴的时候,系列的数据也是一个一维数组,并且跟类目一一对应,但是 3.0 开始数据可以如下显示指定类目的 index:

// 跳过第三个类目
data: [[0, 10.5], [1, 2.3], [4, 2.2]]

具体参见 data 的格式: http://echarts.baidu.com/option.html#series-line.data

Contributor

pissang commented Feb 19, 2016

@genius9316 @SuperZDev

可以试下显示指定 X 轴的位置,默认 X 轴是类目轴的时候,系列的数据也是一个一维数组,并且跟类目一一对应,但是 3.0 开始数据可以如下显示指定类目的 index:

// 跳过第三个类目
data: [[0, 10.5], [1, 2.3], [4, 2.2]]

具体参见 data 的格式: http://echarts.baidu.com/option.html#series-line.data

@SuperZDev

This comment has been minimized.

Show comment
Hide comment
@SuperZDev

SuperZDev Feb 19, 2016

Contributor

@pissang
可是这样就必须显示指定value对应的index序列,为了实现这种功能把复杂度嫁接给了上层的数据处理。
我倒是觉得这应该是在ECharts端一个的配置项,类似highcharts的connectNulls。

而且如果只看整体趋势的话,我觉得这个场景倒是很适合。尤其是大屏展示的时候,有时候你不需要看具体的数据,只是看一个大概。

我在以往做大屏展示的时候(9X5,1920X1080),客户数据会有缺失,这时候显示出来的效果就会差很多。类似 @genius9316 贴出的效果图

Contributor

SuperZDev commented Feb 19, 2016

@pissang
可是这样就必须显示指定value对应的index序列,为了实现这种功能把复杂度嫁接给了上层的数据处理。
我倒是觉得这应该是在ECharts端一个的配置项,类似highcharts的connectNulls。

而且如果只看整体趋势的话,我觉得这个场景倒是很适合。尤其是大屏展示的时候,有时候你不需要看具体的数据,只是看一个大概。

我在以往做大屏展示的时候(9X5,1920X1080),客户数据会有缺失,这时候显示出来的效果就会差很多。类似 @genius9316 贴出的效果图

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Feb 19, 2016

Contributor

嗯,后续可以加上,这是目前版本能实现的思路

Contributor

pissang commented Feb 19, 2016

嗯,后续可以加上,这是目前版本能实现的思路

@cn-xufei

This comment has been minimized.

Show comment
Hide comment
@cn-xufei

cn-xufei Sep 14, 2016

@SuperZDev echarts2.x版本的如何实现呢?

@SuperZDev echarts2.x版本的如何实现呢?

@pissang pissang closed this Sep 22, 2016

@soindy

This comment has been minimized.

Show comment
Hide comment
@soindy

soindy Dec 7, 2017

@pissang 请问 echarts3.* 实现该功能没?

soindy commented Dec 7, 2017

@pissang 请问 echarts3.* 实现该功能没?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment