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

时间:2016-03-03 13:04:19

标签: highcharts

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

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

1 个答案:

答案 0 :(得分:0)

另一个选项(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/

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