Highcharts x轴格式化选项

问题描述：

我是highchart的初学者。我正在尝试一些东西并卡住了。我的x轴具有重复多次的值。工具提示值应该包含日期和时间，如图所示。但我想改变的是x轴值。相同的值只能显示一次，并且在有数据的地方不会重复。Highcharts x轴格式化选项

X轴格式必须是DD-MMM，工具提示应该是DD-MM-YY HH am/pm。这可能吗？

这里是我的审判代码

Highcharts.chart('container', { 
chart: { 
    type: 'spline' 
}, 
title: { 
    text: 'Snow depth at Vikjafjellet, Norway' 
}, 
subtitle: { 
    text: 'Irregular time data in Highcharts JS' 
}, 
xAxis: { 

    categories:['01-Feb-17 12 AM','01-Feb-17 01 AM','01-Feb-17 02 AM','02-Feb-17 04 AM','02-Feb-17 05 AM','02-Feb-17 06 AM','02-Feb-17 07 AM'], 
    labels: {     
        formatter: function() { 
          y=(this.value).substring(1,6); 

         return y; 
        } 


} 
}, 
yAxis: { 
    title: { 
     text: 'Snow depth (m)' 
    }, 
    min: 0 
}, 
tooltip: { 

    formatter: function() { 

      y=(this.x).substring(0,15); 
      return y; 
     }, 
     shared:false 


}, 

plotOptions: { 
    spline: { 
     marker: { 
      enabled: true 
     } 
    } 
}, 

series: [{ 
    name: 'Winter 2012-2013', 
    // 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. 
    data: [5,10,19,10,4,6,8] 


}]

}）;

and this is how i want it to be

对于初学者来说，由于您正在绘制时间序列数据，因此我会使用'datetime'轴类型。这将使得使用日期信息更加直观，并且消除了愚蠢的东西获取类别值的子字符串的需要。然后，它仍然是一个控制'tickInterval'的问题，正如Mike在下面的回答中所指出的那样。 – jlbriggs

答

如果你的x轴类别将是一个可预见的设定值（例如，在每天四个读数），那么你根本就添加tickInterval属性上展现出新的轴标签当天改变时（见http://api.highcharts.com/highcharts/xAxis.tickInterval）。

因此，如果您每天有四个读数，您可以将tickInterval: 4添加到您的x轴选项。这将在每四次读数显示一个轴标签，或者在此示例中每天显示一次。

但是，如果您的x轴类别不可预测（例如，每天有任何数量的读数），那么您可能需要查看此Highcharts演示，其中显示了具有不规则时间段的图表：http://www.highcharts.com/demo/spline-irregular-time。在这个演示中，您会看到常规的非重复轴标签，用于测量任何单位（小时，天数等），数据的绘制频率与其记录在数据中一样频繁。

我希望这些例子和资源对您有所帮助。

我实际上是从json数组中检索数据给highcharts，它给出了每小时的数据，一天中的数据可以是N个数字。在X轴上，我应该得到** Plotinterval **一天，因为如果有数据，必须为每小时绘制数据。请参阅上面的附件截图。这是我希望显示数据的方式。这些是我想要在highchart上表示的实际值。 –

Highcharts x轴格式化选项

相关推荐