如何僅在Highcharts中的日期時間軸上顯示特定的x軸值

我在這個主題上搜索了很多。我在stackoverflow上找到了一個答案，但它非常簡潔並且對我沒有幫助（因爲我對javascript和highcharts都很新穎）。如果有人能夠通過修改我的代碼來解釋如何做到這一點，我將不勝感激。如何僅在Highcharts中的日期時間軸上顯示特定的x軸值

我有以下代碼：

$(document).ready(function() { 
    var chart = new Highcharts.Chart({ 
     chart: { 
     renderTo: 'divcontainer', 
     height: 500 
     }, 
     xAxis: { 
     type: 'datetime', 
     }, 
     credits: { 
     enabled: false 
     }, 
     series: [{ 
     data: [ 
      [Date.UTC(2007,05,29), 300], // This x-axis value should be labeled. 
      [Date.UTC(2007,09,03), 300], // NO LABEL for this value 
      [Date.UTC(2007,09,04), 200] // This x-axis value should be labeled. 
     ]   
     }] 
    }); 

})

此代碼給我：

enter image description here

有兩個問題。

（1）未顯示2007年6月29日的開始日期。我希望那個出現在圖表中。（2）我只想顯示對應於數據系列中第一個和最後一個點的日期。

如果有人能告訴我如何做這兩件事情，我真的很感激。

謝謝。

來源

2011-12-29 Curious2learn

這是有點可能。這code here產生：

enter image description here

這是不漂亮的代碼雖然。

來源

2011-12-31 18:32:32 Mark

謝謝！我喜歡你提供的簡化例子的代碼。但是你是對的，對於我想要展示的約10-12個不同日期的真實案例，將會有許多其他的陳述。此外，還有太多的蜱蟲，我想避免。無論如何，這仍然有幫助，所以我會接受它作爲答案。 – Curious2learn 2012-01-01 18:03:36

關於（1）問題，我相信你不能這樣做，在HighCharts日期時間x軸。設置該類型的軸時，框架將根據您擁有的數據計算相應軸中顯示的刻度。

在回答（2）問題，我相信到目前爲止，你不能跳過日期時間軸的時間。但是，即使我沒有嘗試過，也可能需要使用類別來查看一些解決方法，以便您可以使用格式化程序並替換不需要的刻度。

儘管所有上述，我做了一個解決方法，你可能想要使用，它只需要一點點的格式化或多或少你問。這裏是：

var chart = new Highcharts.Chart({ 
chart: { 
    renderTo: 'container' 
}, 
xAxis: { 
    type: 'datetime', 
    labels: { 
     enabled: false 
    } 

}, 

series: [{ 
    dataLabels: { 
     enabled:true, 
     formatter: function(){ 
      if(this.point === this.series.data[this.series.data.length - 1]) 
      { 
       return this.x 
      } 
      if(this.point === this.series.data[0]) 
      { 
       return this.x 
      } 
     } 
    }, 
    data: [ 
     [Date.UTC(2007,05,29), 300], 
     [Date.UTC(2007,09,23), 300], 
     [Date.UTC(2007,09,04), 400] 
    ] 
}]

}）;

基本上我所做的就是擺脫xAxis標籤，並在點本身顯示我想要的值（第一個和最後一個）的日期。請注意，您可能需要格式化該日期的顯示方式，因爲現在顯示的是以毫秒爲單位的時間戳。

你可以看到這個住在jsFiddle: xAxis labels deleted

來源

2011-12-31 09:26:00 Nobita

謝謝，大雄。你也是一個可能的解決方案，這很好。但我希望日期顯示在軸上。如果這是唯一的答案，我會接受它作爲答案。感謝您的回覆，我很感激。 – Curious2learn 2012-01-01 18:04:55

您是否嘗試在xAxis下放置逗號分隔的值列表：{{'5/29/2007'，'9/4/2007'，'9/23/2008'}]}

和圖表：{系列：[{空}，{300}，{400}]}

我相信你也可以使用一個委託x軸標籤或一系列標籤，這樣可以測試將數值與閾值進行比較並將其刪除。

來源

2012-01-04 19:27:28 Wade

您可以.isLast和.isFirst，這樣做很容易：

 xAxis: { 
       type: 'datetime', 
       labels: { 
        formatter: function() { 
         if(this.isLast || this.isFirst) 
          return [whatever label calculation you need]; 
         else return null; 
        }, 
       }, 
       title: { 
        text: 'Date' 
       } 
      }

來源

2016-04-22 14:30:36

老問題，但現在有一個更清潔的方式與tickPositions做到這一點。

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container' 
    }, 
    xAxis: { 
    type: 'datetime', 
    labels: { 
     // When using tickPositions, you'll also need to specify a label format. 
     format: '{value:%e. %b}', 
    },   
    tickPositions: [Date.UTC(2007,05,29), Date.UTC(2007,09,04)] 
    }, 
    credits: { 
    enabled: false 
    }, 
    series: [{ 
    data: [ 
     [Date.UTC(2007,05,29), 300], // This x-axis value should be labeled. 
     [Date.UTC(2007,09,03), 300], // NO LABEL for this value 
     [Date.UTC(2007,09,04), 200] // This x-axis value should be labeled. 
    ]   
    }] 
});

JSFiddle demo

結果圖表

來源

2016-05-07 14:38:30 JohnnyHK

如何僅在Highcharts中的日期時間軸上顯示特定的x軸值

回答

相關問題