javascript - 在 Highcharts 上设置左右边框

Question

有没有一种方法可以在 x 轴的起点和终点上设置网格线，或者在 highcharts 上以某种方式设置左右边框而不显示整个网格线。进一步了解请引用附图

引用: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() 方法轻松使其动态化。