在高度图上设置左右边框

Question

有没有办法在高架图上设置x轴起点和终点的网格线或某种方式左右边框，而不显示整个网格线。 如需进一步了解，请参阅附图

参考：http://jsfiddle.net/f0j6tjxy/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'spline',
      inverted: false
    },
    xAxis: {
      reversed: false,
      gridLineWidth: 1,
      labels: {
        formatter: function() {
          return this.value + 'km';
        }
      },
    },
    yAxis: {
      title: {
        text: 'Temperature'
      },
      gridLineWidth: 0,
      labels: {
        formatter: function() {
          return this.value + '°';
        }
      },
    },
    legend: {
      enabled: false
    },
    series: [{
      name: 'Temperature',
      data: [
        [0, 15],
        [10, -50],
        [20, -56.5],
        [30, -46.5],
        [40, -22.1],
        [50, -2.5],
        [60, -27.7],
        [70, -55.7],
        [80, -76.5]
      ]
    }]
  });
});

Answer 1

您可以使用minorTicks来实现此目的。通过以下方式：

xAxis: {
  gridLineWidth: 0,
  minorTicks: true,
  minorGridLineWidth:1,
  minorTickInterval: 80,
  ...
}

如果您有动态的最小/最大值，则可以动态设置，例如在加载事件中。

工作示例： http://jsfiddle.net/ewolden/f0j6tjxy/3/

修改

对于动态最小/最大，您可以包括：

chart: {
  events: {
    load: function() {
      minValue = this.xAxis[0].getExtremes().dataMin;
      maxValue = this.xAxis[0].getExtremes().dataMax;
      gridlineDistance = maxValue - minValue;
      this.update({
        xAxis: {
          minorGridLineWidth: 1,
          minorTicks: true,
          minorTickInterval: gridlineDistance,
        }
      }, true)
    }
  }
},

只要图表的开头和结尾有majorTick，就会指定minorTick来在那里绘制网格。

工作示例： http://jsfiddle.net/ewolden/f0j6tjxy/12/

然而，对于实时更新数据，它更难。一种方法是在末端添加plotLines，如下所示：

chart: {
  events: {
    load: function() {
      // set up the updating of the chart each second
      var series = this.series[0];
      var xAxis = this.xAxis[0];
      setInterval(function() {
        var x = (new Date()).getTime(), // current time
        y = Math.round(Math.random() * 100);
        series.addPoint([x, y], true, true);
        xAxis.update({
          plotLines: [{
            value: x - 60000,
            color: '#f2f2f2',
            width: 1
          }, {
            value: x,
            color: '#f2f2f2',
            width: 1
          }]
        });
      }, 1000);
    }
  }
},

工作示例： http://jsfiddle.net/ewolden/1L9aak94/29/

这是难以达到60k毫秒，但使用getExtremes()方法可以轻松实现动态。