2017-12-22 3 views
0

ハイチャートを作成するのにハイチャートを使用しています。私の場合、x軸のラベルを回転させたいが、そうすると、右側のラベルが完全に見えない。そのため、ラベルを左に配置したいと思います。これどうやってするの?ハイチャートを使用してX軸ラベルを左に移動する方法は?

私はオンラインの例を変更して遊びやすくなっています。 http://jsfiddle.net/6hw9tw8q/

Highcharts.chart('container', { 
chart: { 
marginBottom: 80 
}, 
xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'], 
labels: { 
    rotation: 45 
}, 

}, 

series: [{ 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
    }] 
}); 

ありがとうございました!

答えて

1
labels: { 
    rotation: 45, 
    x:-12 
}, 

...私はマイナス45に回転を変更し、これはウィンドウ内のラベルを保持します。 ここにはfiddleが更新されました。

0

私の問題の解決策が見つかりました。あなたはX-ASIX docで位置を変更するxの値を使用することができます

http://jsfiddle.net/nxwkLr70/

labels: { 
    rotation: -45 
}, 
1

グラフの右側に余白を追加することができます。これは、テキストがグラフ境界の外に出ないことを意味します。

Highcharts.chart('container', { 
 
    chart: { 
 
    marginBottom: 80, 
 
    marginRight: 40 //added this line 
 
    }, 
 
    xAxis: { 
 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'December'], 
 
    labels: { 
 
     rotation: 45, 
 
    }, 
 

 
    }, 
 

 
    series: [{ 
 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
    }] 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container" style="height: 400px; width: 500px"></div>

フィドル:marginRight上http://jsfiddle.net/6hw9tw8q/3/

API:https://api.highcharts.com/highcharts/chart.marginRight

関連する問題