Highcharts - 與日期時間軸標籤重疊

我正在使用Highcharts，並且我有一個帶日期時間軸的圖表。大部分時間標籤沿着軸正確分佈，沒有重疊。Highcharts - 與日期時間軸標籤重疊

但有時會發生標籤重疊。在這裏你可以看到一個例子：http://jsfiddle.net/4ghhf/ 使用tickInterval和tickPixelInterval不能解決問題。

我該怎麼做才能避免這個問題？

2012-04-23 sabrina

我看到固定您的問題的方法有兩種：

變更刻度間隔
變更標籤顯示

我申請都在下面的代碼（x-軸節）：

$(function() { 
var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container', 
     type: 'column' 
    }, 

    xAxis: { 
     type: 'datetime', 
     tickInterval : 7*24 * 3600 * 1000, 
     labels : { y : 20, rotation: -45, align: 'right' } 
    }, 
    series: [{ 
     data: [ 
      [Date.UTC(2010, 3, 11), 29.9], 
      [Date.UTC(2010, 4, 8), 71.5] 
     ] 
    }] 
});

來源

2012-04-23 14:30:22 Kirualex

對不起，但我不能使用這些解決方案。 – sabrina 2012-04-24 06:48:11

圖表數據是動態加載的;設置tickInterval會導致圖表中的標籤與長時間段重疊。動態設置tickInterval（取決於時間間隔）不是解決方案，因爲圖表是可縮放的，而縮放導致標籤重疊。我也不能旋轉標籤，因爲我必須複製我們的設計師的設計（我鏈接的jsfiddle只是一個簡單的例子，讓我們理解這個問題）。我試過使用tickPixelInterval，但是當時間週期很短時，像例子一樣，像素不被尊重，標籤重疊。這是爲什麼發生？真的沒有解決方案嗎？ – sabrina 2012-04-24 06:59:52

也許staggerLines是你的解決方案：

xAxis: { 
    type: 'datetime', 
    labels: { 
     staggerLines: 2 
    } 
},

我更新了此設置您的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

從API Ref：

staggerLines：數（自2.1）僅

水平軸。將標籤展開以形成空間或更緊密標籤的行數。。

（經由this comment在github找到）

我更新使用此設置您的jsfiddle：http://jsfiddle.net/benebun/4ghhf/134/

來源

2012-11-30 17:15:48 benebun

另一種解決方案是使用tickPixelInterval，它定義了蜱之間的像素間隔。數字越大，滴答數越少。

http://api.highcharts.com/highcharts#xAxis.tickPixelInterval

來源

2013-02-14 21:22:56 Nick

找到我的答案在這裏：Highcharts overlapping category labels 我使用的是類陣列X軸的標籤，而不是讓HighCharts解析UTC日期代碼。

來源

2014-10-10 16:30:15

它也可以取決於您使用的字體。對我而言，這發生在Arial上，但對於Helvetica或Times New Roman可以正常工作。

來源

2014-12-09 10:53:20 Michiel

有相同的問題，並修復了autoRotation configuration。如果標籤不合適，Highcharts會自動旋轉標籤。如果旋轉次數過多，Highcharts會自動爲您自動移除標籤。

xAxis = { 
    "type": 'datetime', 
    "tickInterval": 30 * 24 * 3600 * 1000, 
    "labels": { 
     autoRotation: [45] 
    } 
}

只要確保你不指定一步，因爲它會覆蓋自轉。

來源

2017-06-01 05:55:49 velval

Highcharts - 與日期時間軸標籤重疊

回答

相關問題