在highchart縮放后如何獲取數組或開始索引和結束索引

Question

我試圖按事件獲取所選區域或縮放區域的開始和結束索引

xAxis: {
  type: 'line',
  events: {
    afterSetExtremes: function(event) {
          var start = Math.ceil(event.min);
          var end = Math.floor(event.max);
      }
  }
}

但它給我的結果像開始1498138440000結束1498154397830

我是從這個關於stackoverflow的問題中得到這個想法的，其次我也嘗試了這個示例，但是我想這與我的問題無關

我的數據集就像

[
 {
    "Camera": "Camera_Lobby",
    "Interval Start": "7/6/2017 13:59",
    " Interval Start (Unixtime)": 1499367540,
    " In": 1,
    " Out": 1,
    "IntervalMoment": "2017-07-06T08:59:00.000Z"
  },
  {
    "Camera": "Camera_Lobby",
    "Interval Start": "7/6/2017 14:05",
    " Interval Start (Unixtime)": 1499367900,
    " In": 1,
    " Out": 1,
    "IntervalMoment": "2017-07-06T09:05:00.000Z"
  },
  {
    "Camera": "Camera_Lobby",
    "Interval Start": "7/6/2017 14:06",
    " Interval Start (Unixtime)": 1499367960,
    " In": 1,
    " Out": 1,
    "IntervalMoment": "2017-07-06T09:06:00.000Z"
  },
  {
    "Camera": "Camera_Lobby",
    "Interval Start": "7/6/2017 14:28",
    " Interval Start (Unixtime)": 1499369280,
    " In": 1,
    " Out": 0,
    "IntervalMoment": "2017-07-06T09:28:00.000Z"
  },
  {
    "Camera": "Camera_Lobby",
    "Interval Start": "7/6/2017 14:31",
    " Interval Start (Unixtime)": 1499369460,
    " In": 0,
    " Out": 1,
    "IntervalMoment": "2017-07-06T09:31:00.000Z"
  }
]

這是我的highchart設置代碼

var chart = Highcharts.chart('container', {

chart: {
    type: 'column',
    zoomType: 'x',
},
title: {
    text: 'People In and Out Graph'
},
subtitle: {
    text: 'Irregular time data'
},
xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
        month: '%e. %b',
        year: '%b'
    },
    title: {
        text: 'Date'
    },
    events: {
        afterSetExtremes: function(event) {
            var start = Math.ceil(event.min);
            var end = Math.floor(event.max);
            console.log('start',start);
            console.log('end',end);
        }
    }

},
yAxis: {
    title: {
        text: 'Number of people at a time'
    },
    min: 0
},
tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.y} person'
},

plotOptions: {
    spline: {
        marker: {
            enabled: true
        }
    }
},

series: [{
    name: 'People Got In',
    data: vm.InData
},
{
    name: 'People Got Out',
    data: vm.OutData
}]
});

我需要獲取所選區域的開始和結束索引，以便再次遍歷數據集並收集有關所選區域的一些信息。

Answer 1

極端情況並不一定要精確說明要點。

請參閱此現場演示 ： http : //jsfiddle.net/kkulig/0j28c2y4/

我將第一個極端設置為與數據點不同：

var dates = [Date.UTC(2017, 0, 1), Date.UTC(2017, 0, 2), Date.UTC(2017, 0, 3), Date.UTC(2017, 0, 4)];

var chart = Highcharts.chart('container', {

  xAxis: {
    type: 'datetime',
    min: dates[1] - 12 * 3600 * 1000, //  minus 12h
    max: dates[2]
  },

  series: [{
    data: [
      [dates[0], 1],
      [dates[1], 7],
      [dates[2], 3],
      [dates[3], 5]
    ]
  }]
});

然后我打印出了極端：

var extremes = chart.xAxis[0].getExtremes()
console.log('---');
for (prop in extremes) {
  var val = extremes[prop];

  if (val) {
    console.log(prop + ": " + Highcharts.dateFormat("%d.%m %H:%M", val));
  }
}

輸出：

min: 01.01 12:00
max: 03.01 00:00
dataMin: 01.01 00:00
dataMax: 04.01 00:00

在這種情況下，只有min和max才是至關重要的。 如您所見，最小值為01.01 12:00 。 我使用getValidPoints函數僅查找可見點：

var filteredPoints = chart.series[0].getValidPoints(undefined, true);

console.log("low index: " + filteredPoints[0].index + "; high index: " + filteredPoints[filteredPoints.length - 1].index);

輸出是期望點的索引：

low index: 1; high index: 2

---

API參考：

• https://api.highcharts.com/class-reference/Highcharts.Series#getValidPoints
• https://api.highcharts.com/class-reference/Highcharts.Axis#getExtremes