2017-04-10 25 views
0

私はCanvasJSを使ってY軸に沿ってラベルの幅を設定する方法を探しています。私は最大幅を設定することができますが、それは私が望むものではありません。私は単純に幅を設定することができるようにしたいと思います。 200pxに設定し、ラベルの長さが短くなる場合は、ラベルの左右に余分なスペースを確保してください。CanvasJSのy軸ラベルの幅を設定しますか?

ちょっとした背景:ページに垂直に3つの別々の縦棒グラフを表示しています&は、Y軸が整列する必要があります。ただし、3つのグラフのそれぞれのラベルの幅は異なります。

現在の結果(悪い、Yは並んでいない軸)

1,500 | 
1,000 | [chart 1] 
500 | 
0  ----------------- 

0.4 | 
0.3 | [chart 2] 
0.2 | 
0.1 | 
0 ----------------- 

$40,000 | 
$30,000 | [chart 3] 
$20,000 | 
$10,000 | 
$0  ----------------- 

望ましい結果(良い、Yが並ん軸)

1,500 | 
1,000 | [chart 1] 
500  | 
0  ----------------- 

0.4  | 
0.3  | [chart 2] 
0.2  | 
0.1  | 
0  ----------------- 

$40,000 | 
$30,000 | [chart 3] 
$20,000 | 
$10,000 | 
$0  ----------------- 

ありがとう!

答えて

3

私はあなたがそれを達成できるかどうかはわかりません。しかし、マージンを使用してすべてのチャートを整列させることができます。ただし、ラベルは左の位置から開始されません。代わりに、ラベルが始まる前にギャップを作成します。

axisY: [{ 
    labelMaxWidth: 100, 
    prefix: "This" 
}] 

調整するには、マージンの値を設定する必要があります。これを行うには、setメソッドを使用できます。

chart2.axisY[0].set("margin", chart.axisY[0].bounds.x2 - (chart2.axisY[0].bounds.x2 - chart2.axisY[0].bounds.x1)); 

ここには作業fiddleがあります。希望が役立ちます。

+0

ありがとう、Beevk。私はCanvasJSのサポートから非常によく似た回答を受け取り、それを使って最高のx2値を見つけ、それに応じて他の図表のマージンを設定しました。それは魅力のように働いた。あなたが言ったように、余分なスペースがあるときにラベルは右寄せされ、左にギャップがありますが、それは素晴らしいようです。再度、感謝します! –

関連する問題