Highcharts not displaying data at some zoom levels

问题

I'm using Highcharts/Highstock to plot a fairly large amount of data (~10,000 points). The data consists of Date objects on the X axis and floats on the Y, formatted as such: [[(date), 1.728], [(date), 0.346], ...]. The dates are always 1 hour apart and there are no gaps in the data.

When the chart's range is >= 21 days (such that at least 21 days of data is graphed), the chart appears correctly. Whenever the range is less than that, though, the chart becomes blank and the tooltip displays each point as having a Y-value of 0.0. The Y values for those points do exist in the array (I can see them in Firebug), but they aren't displayed on the chart. Here's how I'm initializing it:

mainChart = new Highcharts.StockChart({
  chart: {
    renderTo: 'linegraph'
  },

  rangeSelector: {
    buttons: [{
      type: 'day',
      count: 1,
      text: '1 d'
    }, {
      type: 'week',
      count: 1,
      text: '1 wk'
    }, {
      type: 'month',
      count: 1,
      text: '1 mo'
    }, {
      type: 'year',
      count: 1,
      text: '1 yr'
    }, {
      type: 'all',
      text: 'All'
    }],
    selected: 2
  },

  series: [{
    name: 'Electricity usage (kWh)',
    data: graphData,
    tooltip: {
      valueDecimals: 2,
      valueSuffix: "kWh"
    }
  }],
});

回答1:

I had the same issue, but it was everything normal with timestamps on X axis.

Resolved it by sorting data by ascending (provided firstly in reversed order).

回答2:

It turns out that you can't use Date in the X axis of your data. Instead, use the Unix timestamp of the date: Date.getTime(). Major props to FloppyDisk for pointing me in the right direction.

来源：https://stackoverflow.com/questions/11231398/highcharts-not-displaying-data-at-some-zoom-levels

标签

javascript

Highcharts

data-visualization

highstock