Highcharts调整x轴上的第一个和最后一个刻度以指示值

时间:2017-10-13 10:28:54

标签: javascript charts highcharts axis

我当前的x轴如下图所示:

My current x-axis

我需要调整第一个和最后一个刻度到最低和最大值。 所以,让我们说第一个滴答是26.4.2015 18:38:36,最后一个滴答是27.4.2015 9:07:27。其余的滴答应该自动计算。

$('#container').highcharts({
  chart: {
    zoomType: "x"
  },
  xAxis: {
    type: "datetime",
    title: {
      text: "Time"
    },
    minPadding: 0,
    maxPadding: 0,
    min: 1430073516000,
    tickmarkPlacement: "on",
    showFirstLabel: true,
    showLastLabel: true,
    startOnTick: false,
    endOnTick: false,
    labels: {
      formatter() {
        if (this.isFirst || this.isLast) {
          return Highcharts.dateFormat("%e.%m.%Y %H:%M:%S", this.value);
        } else {
          return this.axis.defaultLabelFormatter.call(this);
        }
      }
    }
  },
  yAxis: {
    title: {
      text: "Value"
    }
  },
  tooltip: {
    shared: true
  },
  series: [
    {
      id: "First",
      name: "First",
      marker: {
        enabled: false
      },
      data: [0, 0, 0, 0, 0, 0, 242, 542, 456, 422, 445, 884, 123],
      pointStart: 1430073516000,
      pointInterval: 60000
    },
    {
      id: "Second",
      name: "Second",
      marker: {
        enabled: false
      },
      data: [0, 0, 0, 25, 356, 427, 242, 456, 811, 422, 541, 5, 0],
      pointStart: 1430073516000,
      pointInterval: 60000
    }
  ]
});

JSFiddle:http://jsfiddle.net/vy5uL2aw/1/

1 个答案:

答案 0 :(得分:1)

解决方案是将以下函数添加到xAxis对象。

tickPositioner() {
    let tickPositions = this.tickPositions;
    tickPositions[0] = this.dataMin;
    tickPositions[tickPositions.length - 1] = this.dataMax;
    return tickPositions;
}