HighCharts - 时间序列图表 - xAxis上的不规则日期时间间隔

Question

我需要制作一个图表,其中xAxis的类型为"datetime",但间隔不规则:

http://jsfiddle.net/cz6rL/

这是代码:

$(function () {
  $('#chart1').highcharts({
      chart: {
      zoomType: 'x',
      spacingRight: 20
      },
      title: {
      text: 'Incomes/Outcomes'
      },
      subtitle: {
      text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' :
          'Pinch the chart to zoom in'
      },
      xAxis: {
      type: 'datetime',
      minRange: 15 * 24 * 3600000,

      title: {
          text: null
      }
      },
      yAxis: {
      title: {
          text: 'Euro(€)'
      }
      },
      tooltip: {
      shared: true
      },
      legend: {
      enabled: true
      },
      plotOptions: {
      area: {
          fillColor: {
          linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
          stops: [
              [0, Highcharts.getOptions().colors[9]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
          ]
          },
          //lineWidth: 1,
          marker: {
          enabled: false
          },
          shadow: false,
          states: {
          hover: {
              lineWidth: 1
          }
          },
          threshold: null
      }
      },

      series: [{
      type: 'area',

      pointInterval: 24 * 3600 * 1000,
      pointStart: Date.UTC(2014, 0, 01),
      data: [["31/12/2013", 345.2], ["09/01/2014", 494.79999999999995], ["20/01/2014", 137.2], ["22/01/2014", 210.0], 
      ["23/01/2014", 220.4], ["24/01/2014", 871.0], ["28/01/2014", 420.0], ["30/01/2014", 420.0], ["31/01/2014", 2057.15], 
      ["05/02/2014", 191.2], ["06/02/2014", 81.6], ["07/02/2014", 295.2], ["11/02/2014", 135.12], ["12/02/2014", 189.2], 
      ["13/02/2014", 210.0], ["14/02/2014", 315.2], ["17/02/2014", 462.79999999999995], ["18/02/2014", 544.4], 
      ["19/02/2014", 715.4399999999999], ["20/02/2014", 971.2], ["21/02/2014", 418.0], ["02/02/2015", 366.0]]
      }]
  });     
  });

您可以看到系列值与xAxis值不对应.我该如何解决这个问题:在xAxis上有相同的日子或者有几个月对应于系列值天？

谢谢卢克

Answer 1

您可以删除pointStart赋值,highcharts将根据您提供的值确定范围.Highcharts将查看您提供的数据范围,并根据您的tickInterval设置和图表的可用尺寸自动生成刻度线.如果您需要轴上的刻度线特别是数据中的日期,则不应使用日期时间类型轴.

Highcharts处理unix/epoch时间内的所有日期数据值(自1970年1月1日以来的秒数).如果要使用日期时间轴,则必须以该格式提供数据.

更改所有日期值,例如

["31/12/2013", 345.2]

至

[Date.UTC(2013, 11, 31), 345.2]