Incubator-echarts: Lines and mark areas disappear during zooming

[jnehlmeier]

问题简述 (One-line summary)

During zooming ECharts does not paint lines to chart boundaries if the target point is outside of the visible coordinate range. Mark areas however are painted to chart boundaries. But mark areas also disappear if both start and end coordinates of the mark area are outside the visible coordinate range.

版本及环境 (Version & Environment)

• ECharts 版本 (ECharts version): 3.2.0 / master branch
• 浏览器类型和版本 (Browser version): all
• 操作系统类型和版本 (OS Version): all
  

  重现步骤 (Steps to reproduce)

1. Open https://jsfiddle.net/wy0v5yqv/ or used options posted below
2. Move left handle of zoom slider slightly to the right and left most line part will disappear (bad), but left most mark area still visible (good)
3. Move right handle of zoom slider slightly to the left and right most line part will disappear (bad), but right most mark area still visible (good)
4. Move right handle of zoom slider further to the right and remaining line part will disappear once its target point is out of zoom range (bad). Moving the handle even further to the right until the zoomed/visible range crosses the right edge of the left most mark area causes the left most mark area to disappear as well. Now you have an empty chart (bad).
   

   期望结果 (Expected behaviour)

Lines and mark areas should be painted even if their points are outside of the zoomed area. If you don't want that all the time, at least make it configurable.

可能哪里有问题 (What went wrong)

See "Steps to reproduce" above.

ECharts配置项 (ECharts option)

option = {
    legend: {
        data:['issue']
    },
    dataZoom: [
      { type: 'slider', show: true },
      { type: 'inside', show: true }
    ],
    xAxis: {
      type: 'time',
    },
    yAxis: {
      type: 'value',
      max: 50
    },
    series: [
      {
        name:'issue',
        type:'line',
        data:[
          {name : "2016-01-01", value: ["2016-01-01 00:00:00", 5]},
          {name : "2016-01-02", value: ["2016-01-02 00:00:00", 15]},
          {name : "2016-01-03", value: ["2016-01-03 00:00:00", 25]},
          {name : "2016-01-03", value: ["2016-01-05 00:00:00", 15]},
        ],
            markArea: {
                silent: true,
                data: [
                    [
                        { coord: ["2016-01-01 00:00:00", 5] }, 
                        { coord: ["2016-01-01 23:59:59", 15] }
                    ],
                    [
                        { coord: ["2016-01-02 00:00:00", 10] }, 
                        { coord: ["2016-01-02 23:59:59", 20] }
                    ],
                    [
                        { coord: ["2016-01-03 00:00:00", 15] }, 
                        { coord: ["2016-01-03 23:59:59", 35] }
                    ]
                ]
            },
        }
    ]
}

其他信息 (Other comments)

https://jsfiddle.net/wy0v5yqv/

[pissang]

That's because what dataZoom do is to zoom and filter the data, not simply zoom the view. So even if you move left handle of zoom slider slightly, the first data will still be filtered and not shown in the finally view.

[jnehlmeier]

@pissang I tried adding filterMode: 'empty' to the data zoom options because I thought that might change the behavior (a bit tough to guess without english docs :)), but it doesn't. Lines / mark areas still disappear.

That behavior is a bit annoying when you zoom into a data set and then move the zoomed area across the whole data set, e.g you have 3 years of data and zoom into a week or month and then move this zoom window. Sometimes mark areas can disappear and if you have some larger gaps in your dataset the chart line itself can disappear. IMHO its confusing.

What if you still filter data but keep the first left and right data points outside the range in your model so you can render the chart correctly?

[pissang]

I found markArea may do disappear unexpectedly. I will fix it in the next version.

And about line we agree it's a bit annoying when sliding the window which there is no much data on the view. But it's difficult to "keep the first left and right data points outside the range" in this architecture. Sorry about that. And we will try to figure out a good way to solve the problem.

About filterMode: 'empty'. In this mode the filtered data will be replaced with '-' instead of being removed. It is used not that often.

[jarben]

Any thoughts or progress on this one? Could the view "snap" to the nearest unfiltered data points if boundaryGap is false? Similarly to what happens in the 'category' type?

Or filterMode:'hidden' which wouldn't filter data but just clip line in the view?

[Nick74k]

The same problem (And even worser) with Y axe. X axe just gives a shorter graph. Y axe removes a parts of graph completely, cutting it into small pieces, not linked with each other, and not cutted by graph edges visually, or dramatically changes its shape, depending on filterMode. Is it possible to make zooming without filtering? Please, please, please make filterMode: "none" for us and we will be happy completely )))
Look at this - the same graph with Y zooming to 25, to 24 with filtermode="filter" and to 24 with filtermode="empty"

P.S. And is it possible to add this option to toolbox->feature->dataZoom also?
P.S.2 Commenting of row seriesData.filterSelf(dim, isInWindow); at AxisProxy.filterdata gives needed functionality of graph.

[BlueBeN82]

Any updates on this one?

[jorat1346]

I changed the line at echarts/src/component/dataZoom/dataZoomProcessor.js@54 from:
dataZoomModel.getAxisProxy(dimNames.name, axisIndex).filterData(dataZoomModel);
to
dataZoomModel.getAxisProxy(dimNames.name, axisIndex);

It mint not be the best way to do this for fast rendering, but it works for me for now.

[mvdkwast]

Based on jorat1346 comment, as a work-around I changed the line echarts/src/component/dataZoom/AxisProxy.js@307 to :

(filterMode !== 'disabled') && each(seriesModels, function (seriesModel) {

That way I can specify write the following in my dataZoom section :

filterMode: 'disabled',

This doesn't solve the issue with marklines / areas.

Is there any work in progress on this ?

[iozbek]

filtermode: 'none' resolves the problem.

[ryantunis]

Adding filterMode: none doesn't resolve this problem for me. The mark line still disappears when zooming in.

_Echarts Version: 4.6.0_

_Data Zoom Settings:_

    /**
     * Get's the data zoom mode.
     */
    getDataZoom(): any[] {
      return [{
        type: 'slider',
        xAxisIndex: [0],
        filterMode: 'none'
      }, {
        type: 'slider',
        yAxisIndex: [0],
        filterMode: 'none',
      }, {
        type: 'inside',
        xAxisIndex: [0],
        filterMode: 'none'
      }, {
        type: 'inside',
        yAxisIndex: [0],
        filterMode: 'none'
      }];
    }

_Line Series Object with MarkLine:_

   /**
   * Create's horizontal line series object.
   */
  createHorizontalLineSeries(
    name: string,
    formatterLabel: string,
    color: string,
    xMin: number,
    xMax: number,
    y: number
  ) {
    return {
      name: name,
      type: 'line',
      markLine: {
        lineStyle: {color: color},
        data: [
          [
            // start point of the line
            // we have to defined line attributes only here (not in the end point)
            {
              xAxis: xMin,
              yAxis: y,
              symbol: 'none',
              label: {
                show: true,
                position: 'end',
                emphasis: {
                  show: true,
                  formatter: formatterLabel
                }

              }
            },
            // end point of the line
            {
              xAxis: xMax,
              yAxis: y,
              symbol: 'none'
            }
          ]
        ]
      }
    } as EChartOption.SeriesLine;
  },

[kgtBiligoat]

@ryantunis how do you fixed this problem now

[BaSmile]

@kgtBiligoat For a zoom type 'inside', filter:'none' works for me.

[kgtBiligoat]

@BaSmile which version . I set
dataZoom = [{
type: 'inside',
show: false,
start: 0,
end: 100,
zoomOnMouseWheel: false,
filterMode: 'none',
preventDefaultMouseMove: false
}]
is not work for me （version: 4.4.0）

[tomkp75]

filterMode does not work for me either.

Also, this workaround might not always answer the need. One may want to filter on the serie and not on the marks.

The way I found a markArea would stick is by setting xAxis only (or yAxis only), or to also set x or y as a percentage which is inconvenient as it refers the pixels on the screen not the chart axis. All my other attempts to set both width and height resulted in the markArea disappearing.

[bojue214]

Any updates on this one?