4

グラフの作成には Morris.js を使用しています。Morris.js は SVG を使用してグラフを描画します。ここで JSbin を設定しました: JSbin の例

Morris.js は Raphael を使用して svg グラフを描画します。問題は、X 軸のラベルにあります。ラベルのサイズが大きすぎると消えます。グラフを保持する div 要素のサイズとラベルのフォント サイズをいじりましたが、ラベルはさまざまなユーザーに対して動的に生成されるため、固定値を決定できません。理想的な解決策は、テキストを折り返すことです。状況に対抗するために何ができますか？Morris.js は、次のスニペットを使用してtextsvg 要素を作成します。

 this.raphael.text(xPos, yPos, text).attr('font-size', '11').attr('font-family', 'calibri').attr('fill', this.options.gridTextColor);
4

3 に答える 3

3

問題の定義をもっと明確にする必要があると思いますが、

私の最後では、あなたが送信したコードは正常にJSFIDDLE動作します。また、同じものを複製しましたが、正常に動作しています..

あなたが保持しているデフォルトのサイズをテストしたので、ラベルの問題は自動的に行われると思います.CSSを見るときは幅385px、同じように見えるときは518pxでした.どちらの場合も、レンダリングされたラベルは異なり、実際には特定のラベルを超えています幅はレンダリングされませんでした。SOスタイルとオーバーライドを設定する意味はありません。

私は物事がライブラリに組み込まれていると思います。そのため、ライブラリを変更するか、長い道のりです。

どちらが便利な方法か教えてください。それに応じてお手伝いします:)

編集：ただし、GridTextSizeのプロパティを変更できます：デフォルトでは16です

Fiddle2ここで私は更新しました

すべてのテキストをサイズ 8 で表示する「gridTextSize:8」。

完璧ではありませんが、うまくいきます:)

于 2013-10-29T07:10:27.767 に答える
3

そこから最小化されていない morris.js をダウンロードします。zip-archive でファイルmorris.jsを見つけることができます。編集モードで開き、デフォルトのラベル角度パラメーターの値を変更します (133 行目):

133 |     xLabelAngle: 90,//original value 0

本当に最小化する必要がある場合は、オンラインの js 圧縮ツールでファイルを圧縮できます。

于 2013-11-04T02:56:59.840 に答える