Question

我正在尝试集成图表以制作图表。但是，在某些情况下它不起作用。

我希望图表从我指定的刻度间隔开始，然后以定义的间隔刻度，但是在以下情况下它将失败：

我希望图表从UTC的10月3日凌晨12点开始，然后在10月5日，10月7日等打勾，依此类推..但是它不会显示10月3日作为开始标签，而是从10月4日开始打勾。 / p>

这是配置。（JsFiddle：https://jsfiddle.net/agoyal/9ohep62u/8/）

 Highcharts.chart('container', {
 chart: {
    type: 'spline'
  },
  title: {
    text: 'Snow depth at Vikjafjellet, Norway'
  },
  subtitle: {
    text: 'Irregular time data in Highcharts JS'
  },
  xAxis: {
    "labels": {
      "enabled": true,
      "style": {
        "color": "#434348"
      }
    },
    "tickInterval": 172800000,  // 2 days
    "min": 1538524800000,  // 3rd october 12 AM
    "type": "datetime",
    "title": {
      "text": "Time"
    },
    "startOnTick": false,
    "max": 1539907200000  // 19th october
  },

  yAxis: {
    title: {
      text: 'Snow depth (m)'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
  },

  plotOptions: {
    "series": {
      "pointStart": 1538524800000,
      "pointInterval": 172800000
    },
    "line": {
      "dataLabels": {
        "enabled": false
      }
    },
    "style": {
      "textShadow": "0 0 3px black"
    },
    "exporting": {
      "enabled": true
    }
  },


  chartOptoins: {
    "type": "line",
    "backgroundColor": "white",
    "zoomType": "x",
    "lang": {
      "noData": "No data to display"
    },
    "xAxis": {
      "ordinal": false
    }
  },


  time: {
    useUTC: true
  },

  colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  series: [{
    "name": "Count",
    "data": [
      [1538524800000, 0],  // 3rd october
      [1538697600000, 0],  // 5rd october
      [1538870400000, 0],   // 7rd october
      [1539043200000, 34000], // 9th october
      [1539216000000, 68000],
      [1539388800000, 186300],
      [1539561600000, 35364],
      [1539734400000, 0],
      [1539907200000, 0]
    ]
  }]
});

任何帮助将不胜感激！

Answer 1

您可以使用tickPositioner和标签formatter函数来获得所需的结果：

xAxis: {
    tickPositioner: function() {
        var ticks = [],
            interval = 172800000,
            points = this.series[0].xData,
            value = 1538524800000,
            i = 0;

        for (i = 0; i < points.length; i++) {
            ticks.push(value);
            value += interval;
        }

        return ticks;
    },
    labels: {
        formatter: function() {
            return Highcharts.dateFormat('%e. %b', this.value)
        }
    }
}

实时演示：https://jsfiddle.net/BlackLabel/em0qh7yo/

API：https://api.highcharts.com/highcharts/xAxis.tickPositioner

Highcharts datetimex轴的开始时间和间隔不正确

1 个答案: