Highcharts：如何將x軸延伸到最後一列之外

我有一個Highcharts柱形圖和幾列。
小提琴：http://jsfiddle.net/yishaib/emX5T/Highcharts：如何將x軸延伸到最後一列之外

該設計要求x軸向右延伸，遠遠超過最後一列。任何想法我會怎麼做？

這是我的目標：

enter image description here

咖啡腳本：

$("#container").highcharts 
chart: 
    spacingRight: 200 
    type : 'column' 
    width: 305 
    height: 250 

series: [data: [71, 29]] 

xAxis: 
    categories: ['Column A','Column B']  
    tickWidth: 0 

yAxis: 
    min: 0 
    title: 
    text: '' 
    labels: 
    enabled: false 
    gridLineWidth: 0

來源

2013-10-22 burtyish

在數據中添加一些空值 –

編輯：您需要爲圖表指定更高的要求，如果你不想保留默認項目。這仍然可以讓您將xAxis擴展到2個數據點之外。要調整點的寬度，您需要使用以下一項或多項的混合：tickInterval,pointWidth,pointInterval，也許還有其他一些。 Here是一個更新的jsFiddle，在常規js中對您的代碼進行了一些修改。

你將不得不做一些像this。請注意，標籤格式化程序不起作用（我不熟悉咖啡腳本），但基本想法就在那裏。您首先需要設置要用max: xxxx顯示多少類別。這將擴展xAxis。那麼你可能想隱藏那個「5」，所以你需要使用標籤格式化函數。

xAxis: 
    categories: ['Column A','Column B']  
    tickWidth: 0 
    max: 5 
    labels: 
    formatter: function() { 
       if (this.value <> 5) { 
        return this.value; 
     } 
      }

來源

2013-10-22 15:57:24 wergeld

它的工作原理！我嘗試使用最大設置，但對標籤格式化程序不熟悉。太好了！ – burtyish

沒問題。咖啡腳本看起來有趣。 – wergeld

答案未被接受，因爲我發現這會導致列靠得更近。每列寬度變小，標籤重疊。 – burtyish

我在做類似的事情了Highcharts折線圖，但這個概念適用於柱形圖以及（我懷疑其他類型太多，雖然我還沒有明確的嘗試）。該解決方案依賴於在圖表中創建「隱藏系列」，與您在X軸上具有的類別數量一樣長。

首先，您需要在Highcharts選項對象中將圖表的chart.ignoreHiddenSeries選項設置爲true。然後，在創建系列時，將該系列的visible選項設置爲false（或者，您可以在創建系列時調用hide()），並將該系列的showInLegend選項設置爲false。

這是一個顯示效果的jsFiddle：http://jsfiddle.net/8PpDN/1/。這個小提琴從API docs中提供的chart.ignoreHiddenSeries的例子中分出來。

快速參考，這裏是小提琴的JavaScript代碼。請注意，隱藏序列數據數組中有多個0，因爲xAxis上有類別。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      ignoreHiddenSeries: true, 
      type: 'column' 
     }, 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 
     series: [ 
      {data: [100, 60]}, 
      {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false} 
     ] 
    }); 
});

現在，由於x軸下存在類別標籤，因此沒有出現在屏幕快照中，因此不完全符合要求。在這種情況下，只需爲類別標籤提供空字符串，並完全消除勾號（將xAxis選項中的minorTickLength和tickLength設置爲0）即可達到相同的效果。

這裏是的jsfiddle表示：http://jsfiddle.net/BMncj/1/和再次從小提琴的JavaScript代碼：

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      ignoreHiddenSeries: true, 
      type: 'column' 
     }, 
     legend: {enabled:false}, 
     xAxis: { 
      categories: ['Series 1', 'Series 2', '', '', '', '', '', '', '', '', '', ''], 
      minorTickLength:0, 
      tickLength:0 
     }, 
     series: [ 
      {data: [100, 60]}, 
      {data: [0,0,0,0,0,0,0,0,0,0,0,0], visibility:'hidden', showInLegend:false} 
     ] 
    }); 
});

從這裏也可以通過調整種類的數量與X軸延伸的長度發揮，和/或調整前面提到的間隔選項。

我希望這有助於！

來源

2013-11-01 14:51:56 cstays

這是一個有趣的方法。自發布這個問題以來，我已經決定使用純HTML和CSS實現我的圖表。這張圖表非常簡單，並且爲高度簡化了的事情開了一個彎，給了我很多自由的風格和設計，這對於使用高層建築來說太麻煩了。例如，我看到你的解決方案導致列偏離中心，稍微偏左。這可能是由於隱藏列留下了空間。 – burtyish

@ yishaib是的，你是對的偏心集中。直到你指出它，我才注意到它。我確信有辦法解決它，但聽起來你對解決方案感到高興。祝你好運！ – cstays

我正在嘗試將它與折線圖一起使用，並且我簡單地在示例代碼中將'列'替換爲'行'，這不起作用。你可以用折線圖分享你的代碼嗎？謝謝 –

Highcharts：如何將x軸延伸到最後一列之外

回答

相關問題