3

Flot 0.8.1 で Rails 3.2.11 アプリを作成しています。Prawn を使用して Flot チャートを PDF にレンダリングしたいと考えています。( .getCanvasおよび.toDataURLメソッドを使用して、画像データをサーバーに Ajax します。) jquery.flot.canvas.jsプラグインのおかげで、私の Flot チャートはブラウザーで問題なくレンダリングされ、キャンバスに軸ラベルが表示されます。

問題

幅の広い棒グラフを作成しています。x 軸のラベルをバーの下の中央に配置し、目盛線の下の中央に配置したくありません (左に少し離れすぎているように見えます)。

軸ラベルをキャンバスに配置する前 (つまり、jquery.flot.canvas.js プラグインを使用せずに HTML ラベルを使用する場合)、次のように SCSS でスタイルを設定していました。

.flot-x-axis {
  .tickLabel {
    font-size: 10px;
    padding-left: 16px;     // Nudges x-axis labels to the right
  }
}

現在、キャンバス上にラベルをレンダリングすることにより、上記の SCSS は x 軸のラベルを右に移動しません。奇妙なことに、font-size:スタイリングは機能しますが、padding-left:は効果がありません (margin-left: も試しました)。パディングを適用するための適切なセレクターが見つからないようです。

助けていただければ幸いです。ありがとう！

アップデート

コードでalign: 'center'オプションを使用していますが、効果がないようです (つまり、align: 'center' を省略した場合と同じです)。Flot キャンバス プラグインの使用方法 を参照してください。FWIW、時間ベースのデータを使用しています。

これと同様の問題が発生しているようです。Flot棒グラフの月の配置の問題

ここでjsFiddle。注: FireFox では正常にレンダリングされますが、Chrome ではレンダリングされません。

もちろん、私の jsFiddle では問題なく動作しますが、私のコードでは動作しません。私は私の目を鋭くする必要があると思います ！

4

1 に答える 1

6

Flot Canvas プラグインは、CSS でできることのサブセットのみを認識します。通常、テキスト スタイルに関連するものはすべて認識します。フォント ファミリー、サイズ、スタイル、間隔、色。パディング、マージンなどのボックスモデルのルールは認識しません。

あなたが本当に望むのは、バーalign: centerオプションを使用することです。

于 2013-05-24T20:59:30.240 に答える