1

いくつかの Highcharts グラフを含むページの wkhtmltopdf PDF 出力で、グラフの一部の要素が欠落しています。主に、目盛り、グリッド線、列の境界線、凡例の境界線、および折れ線/スプライン チャートの線を含むすべての単純な直線が欠落しています。 (データポイント表示)。

他のスタックの質問からこの問題を解決するために使用されるトリックを試しました。つまり、シリーズで次のすべてを設定します。

enableMouseTracking: false,
shadow: false,
animation: false

...列/スプラインにそれらを設定するだけでなく。運がない。

ブラウザ ページの画像へのリンクは次のとおりです。

これは、pdf出力の画像へのリンクです。

これは、最初の 2 つのグラフのグラフ オプションの要旨へのリンクです。

これはすべて、VirtualBox ゲストにインストールされた Linux Ubuntu 12.04 で、2 日前の最新の Highcharts ダウンロードと wkhtmltopdf バージョン 0.10.0_rc2 を使用しています。wkhtmltopdf への呼び出しは、主に Rails 3 アプリケーションの PDFKIT gem を経由していますが、コマンド ラインで wkhtmltopdf を直接呼び出しても同じ結果が得られました。

どんな助けでもTIA！

アップデート：

グラフの前にある HTML の特定のスニペットに問題を切り分けました。Twitter Bootstrap css/javascript フレームワークを使用しています。このコードは一連のボタンを生成します。

<div class='btn-group' data-toggle='buttons-radio'>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2012">2012</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2011">2011</button>
  <button class="filterButton btn btn-primary selected" data-filter="school_year" data-group="dr_filter" data-value="2010">2010</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2009">2009</button>
  <button class="filterButton btn" data-filter="school_year" data-group="dr_filter" data-value="2008">2008</button>
</div>

具体的には、問題の原因となっているのは .btn-group タグの存在です - それを取り除き、他のすべてをそのままにしておくと、PDF は前述の問題なしでページ表示と同じものを生成します。また、このスニペットをチャートの後のページ上の任意の場所に移動すると、すべてが正しく機能します。

Bootstrap javascript関数を完全に無効にしても問題が依然として存在するため、実際のhtml/cssまで問題をさらに分離しました。

4

2 に答える 2