2017-02-02 4 views
0

Jaspersoft StudioでHTML5(ハイチャート)の縦棒グラフを作成しましたが、xAxisラベルはかなり長くなり、ひどく見える凡例と重なっています。会社の基準では、凡例が下部になければならず、ラベルが270度回転して垂直になるように指示しています。つまり、伝説を動かしたり、ラベルを回転させることはできません。長すぎると、ラベルが一定の長さの後に切り取られ、部分的にしか表示されないため、伝説と重複しないようにしたいと考えています。Jaspersoft Studio html5グラフ(ハイチャート)xAxisラベルがオーバーフローする

このページでは、X軸ラベルに適用可能なすべてのプロパティのリストを持っています

http://api.highcharts.com/highcharts/xAxis.labels

私はそこに記載されているoverflowプロパティを使用してみましたが、唯一の内部のラベルに関連すると思われることをしましたプロットエリアすなわち:

xAxis 
    labels 
      overflow:false 

だから、誰もが、私はその下に伝説の重複を防止するためにX軸ラベルの長さを制限することができます方法を知っていますか?

答えて

0

私はjaspersoft-studioについて何も知りません。だから、私はあなたの状況でこれが動作するのか分からない。

しかし、まっすぐなHighChartsでは、lablesのuseHTMLを有効にして、ラベルの幅をcssに設定することができます。

Javascriptを:

Highcharts.chart('container', { 
    chart: { 
     marginBottom: 80 
    }, 
    xAxis: { 
     categories: ['Long name 1', 'longer name number 2', 'this one is really really really long', 'Kinda long, but not longest', 'short', 'long name that is long', 'I think you get the point', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 
     labels: { 
      rotation: 45, 
      useHTML:true 
     } 
    }, 

    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] 
    }] 
}); 

CSS:

.highcharts-axis-labels span{ 
    width:30px; 
} 

http://jsfiddle.net/0jwf9nb6/1/

0

ゴープロパティ]> [詳細プロパティ表示をチャートと新しいプロパティxAxis.labels.formatを追加して表現を使用するようにこれを設定するにはプロパティ値 ('My Text').substring(0, 5)

$V{}または$F{}などの「My text」またはxAxisラベルとして適切に使用している値をスワップアウトし、部分文字列をグラフに最適なものに制限します。

は、代替的に下のコードを追加することにより、ソースエディタを介して直チャートの設定にこれを追加 <hc:chartSetting name="default">例えば:

<hc:chartProperty name="xAxis.labels.format"> 
    <hc:propertyExpression><![CDATA[('My Text').substring(0, 5)]]></hc:propertyExpression> 
</hc:chartProperty> 
関連する問題