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

來源

2017-03-09 yadu.nandan

對於初學者來說，由於您正在繪製時間序列數據，因此我會使用'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。在這個演示中，您會看到常規的非重複軸標籤，用於測量任何單位（小時，天數等），數據的繪製頻率與其記錄在數據中一樣頻繁。

我希望這些例子和資源對您有所幫助。

來源

2017-03-09 12:42:34

我實際上是從json數組中檢索數據給highcharts，它給出了每小時的數據，一天中的數據可以是N個數字。在X軸上，我應該得到** Plotinterval **一天，因爲如果有數據，必須爲每小時繪製數據。請參閱上面的附件截圖。這是我希望顯示數據的方式。這些是我想要在highchart上表示的實際值。 –

Highcharts x軸格式化選項

回答

相關問題