Question

我需要创建一个图表，其中xAxis的类型为“datetime”，但间隔不规则：

这是代码：

$(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]

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

1 个答案: