Highcharts - 強制繪製線消耗可用寬度？

我們的設計師已要求我們繪製堆積面積圖，以便繪圖線消耗可用圖表寬度的100％，而不是在第一個/最後一個刻度線處開始/停止。這是由我們的設計師提供了樣機，說明我們正在努力實現：Highcharts - 強制繪製線消耗可用寬度？

http://oi50.tinypic.com/25s2bzm.jpg

目前圖表呈現如下，並指出，該地塊線不消耗圖表的寬度：

$(function() { 
var chart; 
$(document).ready(function() { 
    Highcharts.setOptions({ 
     colors: ['#1FA5FF', '#9BD237', '#E6673B'] 
    }); 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'area' 
     }, 
     title: { 
      text: null 
     }, 
     exporting: { 
      enabled: false 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     xAxis: { 
      categories: ['Mar 2012', 'Apr 2012', 'May 2012', 'Jun 2012', 'Jul 2012', 'Aug 2012', 'Sep 2012'], 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: null 
      } 
     }, 
     plotOptions: { 
      area: { 
       fillOpacity: 0.3, 
       stacking: 'normal', 
       lineWidth: 3, 
       marker: { 
        lineWidth: 3, 
        enabled: false 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [30, 26, 18, 35, 30, 28, 40, 31] 
     }, { 
      name: 'Jane', 
      data: [40, 35, 37, 33, 30, 42, 30, 26] 
     }, { 
      name: 'Bob', 
      data: [26, 33, 28, 20, 35, 33, 35, 20] 
     }] 
    }); 
});

我已經通過API望去，四處搜尋，但我沒發現（或者也許錯過了）我必須設置來實現這一假設它甚至有可能的選項。預先感謝您的幫助。

更新：解決的辦法是設置xAxis的最小和最大屬性，所以我更新了上述內容以反映這一點。但是，這會截斷圖表數據，因爲它排除了第一個和最後一個數據點，所以爲了解決這個問題，我將虛擬值添加到類別和series.data數組中，注意到數據是一個對象，我通過Ajax返回建立圖表：

data.categories.unshift(''); 
data.categories.push(''); 
for (var i = 0, len = data.series.length; i < len; i++) { 
    data.series[i].data.unshift(0); 
    data.series[i].data.push(0); 
}

在x軸的最小/最大，然後設置如下：

xAxis: { 
    min: 1, 
    max: data.categories.length - 2 // 2nd to last index 
}

來源

2013-03-22 Markus Hay

JSfiddle下面的答案（它的作品）：http://jsfiddle.net/8pmVK/1/ – nickhar 2013-03-22 15:40:41

謝謝，這絕對有幫助，雖然它有一個不需要的副作用。通過將min設置爲1並將max設置爲5，我失去了第一個和最後一個數據點，但是我可以通過將虛擬條目添加到類別的開始和結尾以及我的series.data數組中來解決這個問題。 – 2013-03-22 16:33:26

你需要找到正確的最小/最大爲您x軸。在你的例子中：

xAxys: { 
... 
min: 1, 
max: 5 
}

來源

2013-03-22 15:37:32 Luca

你可以在最小和最大值中使用小數。

在你的情況，0.5分鐘和6.5最大值出現這樣的伎倆： http://jsfiddle.net/jlbriggs/8pmVK/2/

min:0.5, 
max:6.5,

使用整數總是要麼離開空間或截斷。這可以動態完成，如果需要調用getExtremes（），相應地調整最小值和最大值，然後調用setExtremes（）

來源

2013-03-25 20:30:17 jlbriggs

我確信上述項目已經完成，但也可以使用Highstocks代替Highcharts相同的許可證），並添加一個滾動條，如下所示：[http://jsfiddle.net/8pmVK/]。

 scrollbar: { 
      enabled: true 
     },

此外，Highstock包括Highcharts的所有功能。

來源

2015-05-26 21:23:38

Highcharts - 強制繪製線消耗可用寬度？

回答

相關問題