HighCharts - 时间图表 - xAxis上的不规则日期时间间隔 [英] HighCharts - timeseries chart - irregular datetime interval on xAxis

问题描述

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

http://jsfiddle.net/cz6rL/

这是代码：

  $（function（）{
 $（'＃chart1'）。highcharts（{
 chart：{
 zoomType：'x'，
 spacingRight：20 
}，
 title：{
 text：'收入/成果'
}，
 subtitle： {
 text：document.ontouchstart === undefined？
'在绘图区域中单击并拖动以放大：
'捏合图表以放大
} 
 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，
说明：{
 hover：{
 lineWidth：1 
} 
}，
 threshold：null 
} 
}，
 
系列： [{
 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] 2014，315.2]，[17/02/2014，462.79999999999995]，[18/02/2014，544.4]，
 [19/02/2014，715.4399999999999] 02/2014，971.2]，[21/02/2014，418.0]，[02/02/2015，366.0]] 
}] 
}）; 
}）; 
  

您可以看到系列值不对应xAxis值。

感谢
Luke

div class =h2_lin>解决方案

您可以删除pointStart赋值，highcharts将根据您提供的trhe值确定范围。 Highcharts将查看您提供的数据范围，并根据您的tickInterval设置和图表的可用维度自动生成刻度线。如果需要轴上的刻度线，具体来说是您在数据中的日期，则不应使用datetime类型轴。

Highcharts处理unix / epoch时间中的所有日期数据值（自1970年1月1日以来的秒数）。如果要使用日期时间轴，则必须以该格式提供数据。

更改所有日期值，例如

  12/2013，345.2] 
  

至

  [Date.UTC（2013，11，31），345.2] 
  

I need to make a chart on which xAxis is of type 'datetime', but have irregular intervals:

http://jsfiddle.net/cz6rL/

this is the code:

$(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]]
      }]
  });     
  });

you can see that series values do not correspond to xAxis values. How can I fix it: having same days on xAxis or having months corresponding to series values days?

thanks Luke

解决方案

You can remove the pointStart assignment, highcharts will determine the range based on trhe values you provide it. Highcharts will take a look at the range of data you supply it and auto generate the tick marks based on your tickInterval settings, and the available dimensions of your chart. If you need the tick marks on the axis to be specifically the dates you have in you data, you should not used the datetime type axis.

Highcharts handles all date data value in unix/epoch time (number of seconds since 1/1/1970). If you want to use datetime axis, you must supply your data in that format.

Change all your date values such as

["31/12/2013", 345.2]

to

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

这篇关于HighCharts - 时间图表 - xAxis上的不规则日期时间间隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！