2012-06-02 160 views
2

我正在嘗試使用Highcharts庫構建面積圖。突然間我發現在我的實際數據開始之前x軸上有一些間距。我想用適當的數據從[0,0]軸開始右圖。Highcharts刪除X軸上的空間

Charts

<?php 
    $data1 = array(3300, 3000, 4300, 4200, 2900, 1900, 1800); 
?> 
<script type="text/javascript">$(function() { 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'areachart', 
     type: 'area' 
    }, 
    title: { 
      text: 'People' 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     startOnTick: false, 
     categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] 
    }, 
    yAxis: { 
     title: { 
      text: null 
     }, 
     labels: { 
       formatter: function() { 
        return this.value; 
       } 
     } 
    }, 
    plotOptions: { 
     area:{ 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    series: [{ 
     data: [<?php foreach($data1 as $da): 
         echo $da.', '; 
        endforeach; 
       ?> 
       ] 
    }] 
}); 
}); 
</script> 

回答

1

這一點,因爲你正在使用的類別爲xAxis是不可能的。類別的標籤和點總是設置在類別的中間。因此,第一個和最後一個類別有你想擺脫的差距。
但在這種情況下,它不是一個錯誤,它是一個功能。

您可以嘗試修改您的xAxis以使用常規座標軸,並使用自定義標籤格式化程序顯示天數而不是數字。

+0

的人可以看看答案@ http://stackoverflow.com/questions/18593883/highcharts-remove-gap-between - 關於如何實現您所建議的修復的第一步 - 開始 - 第一 - 價值。因爲,沒有比從StackOverflow複製和粘貼更好的工作來完成工作! – Roet

1

好消息,這是可能的...有一些注意事項。

xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     min:0.5, 
     max:10.5, 
     tickInterval:1, 
     maxPadding:0, 
     endOnTick:false, 
     startOnTick:false 
    } 

http://jsfiddle.net/eg9jn/

以下是重要的位: min和max被設定爲0.5的 「內部」 的圖表。 start/endOnTick設置爲false。

警告:當只有兩類這不工作...