Highstock差距正在导致线条渲染问题 [英] Highstock gapsize is causing line rendering issue

问题描述

我使用Highstock（v4.2.3）在具有多个不同Y轴的StockChart中呈现数据，所有数据均在X轴上对时间进行绘制。数据中有空白，我想描述这些空白，但是当我打开gapSize（使用除零以外的任何值）时，会出现一个奇怪的怪癖，导致线渲染问题 - 使用导航器放大时在某些日期范围内（并非全部），在某些情况下（其模式我还没有分辨），图表无法完全呈现整条x轴线。

注释截图描述了这个问题。

当我关闭gapSize（或明确地将其设置为零）时，此问题消失。请注意，间距本身在图表上正确显示（当导航到不存在线渲染问题的日期范围时）。

  plotOptions：{
 series：{gapSize：2} 
} 
  

有什么想法？

解决方案

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

正如你可以在我们的API中读到的：
http://api.highcharts.com/highstock#plotOptions.line.gapSize

缺口大小为5意味着如果两点之间的距离大于两个最近点的五倍，那么图形将被打破

就我所知道的数据而言，你有随机差距，所以你永远不会知道两个最近点之间的距离是多少。例如，如果每一小时都有数据，两个最近点之间的距离将是15分钟，并且gapSize将设置为2，那么您将只能看到最近的点。

当您使用缩放比例时，有时您的可见数据最近距离发生变化，所以差距也在变化。
看这个例子：
http://jsfiddle.net/2N52H/111/

也许你可以使用xAxis.ordinal参数来显示你的差距：
http://api.highcharts.com/highstock#xAxis.ordinal

您也可以更改标准通过使用包装来实现功能。在这里你可以阅读它：
http：//www.highcharts。 com / docs / extends-highcharts / extends-highcharts

例如，您可以更改gappedPath函数：

 （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 
 
 //扩展for ordinal break 
 while（i--）{
 if（points [i + 1 ] .x  -  points [i] .x> gapSize）{
 points.splice（//在此之后插入
i + 1，
 0，{
 isNull：true 
} 
）; 
} 
} 
} 
 return th is.getGraphPath（分）; 
 
 
 $（$）
 $（$）
 
 
 
例子： 
  http://jsfiddle.net/2N52H/113/  
 
 
 
亲切的问候。
 
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?
解决方案
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.

                        
这篇关于Highstock差距正在导致线条渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！