Highstock gapsize is causing line rendering issue

问题

I'm using Highstock (v4.2.3) to present data in a StockChart with a number of different Y axes, all plotted against time on the X axis. The data has gaps in it, and I'd like to depict those gaps, but when I turn on gapSize (with any value other than zero), there's a weird quirk that causes line rendering issues--when using the navigator to zoom in on certain date ranges (not all), in some cases (whose pattern I've yet to discern) the chart fails to fully render the line across the entire x axis.

This annotated screenshot depicts the issue.

When I turn gapSize off (or explicitly set it to zero), this problem goes away. Note that the gaps themselves appear correctly on the chart (when navigating to a date range that doesn't present the line rendering issue).

plotOptions: {
    series: {gapSize:2}
}

Any ideas?

回答1:

jsFiddle with your issue: http://jsfiddle.net/2N52H/109/

As you can read in our API: http://api.highcharts.com/highstock#plotOptions.line.gapSize

A gap size of 5 means that if the distance between two points is greater than five times that of the two closest points, the graph will be broken

As far as I know data you have has random gaps so you will never know what is the distance between two closest points. For example if you will have data in every one hour, distance between two closest points will be 15 minutes and your gapSize will be set to 2, you will see only your closest points.

When you are using zoom sometimes your visible data closest distance is changing so the gaps are changing as well. See this example: http://jsfiddle.net/2N52H/111/

Maybe you can use xAxis.ordinal parameter to visualise your gaps: http://api.highcharts.com/highstock#xAxis.ordinal

You can also change standard functionallity by using wrapper. Here you can read about it: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

For example you can change gappedPath function:

(function(H) {
    H.wrap(H.Series.prototype, 'gappedPath', function(proceed) {
      var gapSize = this.options.gapSize,
        xAxis = this.xAxis,
        points = this.points.slice(),
        i = points.length - 1;

      if (gapSize && i > 0) { // #5008

        // extension for ordinal breaks
        while (i--) {
          if (points[i + 1].x - points[i].x > gapSize) {
            points.splice( // insert after this one
              i + 1,
              0, {
                isNull: true
              }
            );
          }
        }
      }
      return this.getGraphPath(points);

    })
  }(Highcharts))

example: http://jsfiddle.net/2N52H/113/

Kind regards.

来源：https://stackoverflow.com/questions/35317459/highstock-gapsize-is-causing-line-rendering-issue

标签

javascript

Highcharts

highstock