Highchartsエリアカテゴリチャートの両面からパディングを削除するにはどうすればよいですか？

Question

エリアチャートの両側に余分な余白があり、minPadding/maxPaddingはカテゴリでは機能しません。

パディングなしでエリアチャートを開始したり終了したりします。

私のコードは以下の通りです：

http://jsfiddle.net/nx4xeb4k/1/

$('#container').highcharts({ 
    chart: { 
    type: 'area', 
    inverted: false 
    }, 
    title: { 
    text: 'Too Much Padding On Either Side' 
    }, 
    plotOptions: { 
    series: { 
     fillOpacity: 0.1 
    } 
    }, 
    xAxis: { 
    type: 'category' 
    }, 
    yAxis: { 
    title: { 
     text: 'Data Point' 
    } 
    }, 
    legend: { 
    enabled: false 
    }, 
    tooltip: { 
    pointFormat: '<b>{point.y}</b> points' 
    }, 
    series: [{ 
    name: 'Visits', 
    data: [ 
     ["Monday", 58], 
     ["Tuesday", 65], 
     ["Wednesday", 55], 
     ["Thursday", 44], 
     ["Friday", 56], 
     ["Saturday", 65], 
     ["Sunday", 69] 
    ], 
    dataLabels: { 
     enabled: false, 
     rotation: -90, 
     color: '#FFFFFF', 
     align: 'right', 
     format: '{point.y:.1f}', 
     y: 10, 
     style: { 
     fontSize: '14px', 
     fontFamily: 'Verdana, sans-serif' 
     } 
    } 
    }] 
}); 

Answer 1

は私の同僚が私のチャートのいくつかのために、この非常事態を解決しました。その解決策は、x軸からtype: 'category'を削除し（代わりにlinearのタイプにする）、代わりに配列から軸ラベルを置き換えます。

はここで変更されているものです：

まず、私はあなたのx軸ラベルの配列を追加しました。

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday", 
"Saturday","Sunday"]; 

次に、y軸の値だけを保持するように系列の値を更新しました。

series: [{ 
    name: 'Visits', 
    data: [58, 65, 55, 44, 56, 65, 69], 

はその後、あなたのx軸のために、私はデフォルトの線形値の代替物としてのアレイからラベルに引っ張ってformatter機能が含まれています。

xAxis: { 
    labels: { 
    formatter: function(){ 
     return categoryLabels[this.value]; 
    } 
    } 
}, 

最後に、私はラベルの配列から値を表示するようにtooltipオプションを更新しました。

tooltip: { 
     formatter: function() { 
      return categoryLabels[this.x] + ': ' + Highcharts.numberFormat(this.y,0); 
     } 
    }, 

私はこの微調整であなたのフィドルを更新：http://jsfiddle.net/brightmatrix/nx4xeb4k/4/

私はあなたが私が持っているとして有用なこの解決策を見つけることができます願っています！

Answer 2

APIによると、highcharts.xAxis.tickmarkPlacementのデフォルト値はbetweenであり、各カテゴリーのポイントは、あなたのチャートでxAxis上の2つの目盛りの間に低下する理由です。

onにhighcharts.xAxis.tickmarkPlacementを設定し、thisようhighcharts.xAxis.minとhighcharts.xAxis.maxの値を中心に演奏することで、あなたが望むものを達成することができるはずです。

Answer 3

最小/最大値を宣言して問題を解決できます。

var categoryLabels = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"]; 
//.... 
xAxis: { 
    min: 0.49, 
    max: categoryLabels.length - 1.49, 
    categories: categoryLabels, 
    type: 'category' 
}, 

例：

• http://jsfiddle.net/fo04m7k7/