jqplot を使用していくつかのチャートを動的に生成しています。
私のラベルのいくつかは非常に長いテキスト文字列で、うまく表示されません。x 軸に沿って 30 度の角度でラベルを印刷しましたが、長いラベルはページの右側にはみ出します。
ラベルの最大幅 (理想的にはグラフのバーと同じ) を設定し、ラベルのテキストを折り返す方法はありますか?
jqplot を使用していくつかのチャートを動的に生成しています。
私のラベルのいくつかは非常に長いテキスト文字列で、うまく表示されません。x 軸に沿って 30 度の角度でラベルを印刷しましたが、長いラベルはページの右側にはみ出します。
ラベルの最大幅 (理想的にはグラフのバーと同じ) を設定し、ラベルのテキストを折り返す方法はありますか?
CSSでできると思います。.jqplot-xaxis-tick{ width: xxx px;}
(それぞれ jqplot-yaxis-tick、jqplot-y2axis-tick...) のおかげで、xaxis のティックはカスタマイズ可能です。
JavaScriptで解決しました。window.onload でスクリプトを実行する必要があります。そうしないと、チャートの DOM 要素を取得できません。
window.onload = function() {
var xAxisLabel = document.getElementsByClassName("jqplot-xaxis-tick");
var i;
for (i = 0; i < xAxisLabel.length; i++) {
if(i%2 == 0)
xAxisLabel[i].style.top = "32px";
}
};
基本的に、要素の垂直位置を 2%0 の位置に変更します。いくつかのcssプロパティを調整する必要があるよりも
.jqplot-xaxis{margin-top:10px; height: 50px !important;}
.jqplot-xaxis は、xaxis ラベル バーのクラスです。
私は数ヶ月前に同じ問題を抱えていました。@boro からの素晴らしい解決策に関する質問は次のとおりです。