Question

我有一个只有一个系列的areapline。该设计要求绘制触摸该系列的x轴网格线，并且不要超出该系列。是否有可能做到这一点？这是我配置网格线的代码：

xAxis: {
    gridLineWidth: 1,
    tickAmount: 30,
    lineWidth: 0,
    labels: {
       enabled: false
    },
    minPadding: 0
},

Answer 1

另一个选项（jlbriggs在对问题的评论中提到的另外两个选项）可能是extend Highcharts并在包装器中更改网格线的路径，如：

  (function(H) {
    var UNDEFINED;
    H.wrap(H.Tick.prototype, 'render', function(p) {
      p.apply(this, [].slice.call(arguments, 1)); //run original function

      if (this.axis.isXAxis && this.gridLine) {
        var point = this.axis.series[0].options.data[this.pos],
          d = this.gridLine.attr('d').split(' ');
        if (point !== UNDEFINED) {
          d[2] = this.axis.chart.yAxis[0].toPixels(point);
          d = d.join(' ');
        } else {
          d = ''; //remove if not crossing any point
        }
        this.gridLine.attr({
          d: d
        });
      }
    });

  })(Highcharts)

示例：http://jsfiddle.net/69f5z3us/

如果网格线未穿过任何点，则网格线将被删除，但如果您愿意，可以更改该部分代码。

Highcharts - 仅在系列中绘制网格线

1 个答案: