javascript - jqPlot がキャンバスをレンダリングしないのはなぜですか?

Question

棒グラフに jqPlot を使用しようとしていますが、何も表示できません。

jqPlot コードとすべてのプラグインを含めました。エラーはまったく表示されません

サンプルコードを直接コピーしました：

html:

<div id="jqplot" class="plot">

</div>

Javascript:

"use strict";
(function ($){

        $.jqplot('jqplot',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);

})(jQuery);

クラス「jqplot-target」を「jqplot」divに追加しているため、javascriptが機能している必要がありますが、divにキャンバス/チャートを追加していません。クラスが追加された空のdivのみが表示されます。

これがレンダリングされない理由はありますか?

私は html5boilerplate も使用していますが、2 つの既知の問題は見つかりません。

ありがとう、

トーマス

score 5 · Accepted Answer

問題が見つかりました。jqplot が内部にあるメインコンテナ div を、ページの読み込み時に display:none に設定しました。「enter」ボタンをクリックすると、.fadeIn() で表示されます。

親が display: none; の場合、キャンバスを追加できないと思います。- ユーザーが Enter をクリックした後、メインコンテナにフェードインする関数内で $.jqplot を呼び出すことで動作するようになりました...

score 2 · Accepted Answer

あなたのCSSがクラス「プロット」に何をしているかを示すことができますか? jqPlotの使用ページには、幅と高さをプロットターゲットに必ず追加する必要があると記載されています。

score 0 · Accepted Answer

以前にこの問題に遭遇しました。何らかの理由で、次の jqplot コードが機能しませんでした。

$(document).ready(function () {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}

ただし、 $(document).ready(function{...} を jQuery(function ($){..} に切り替えると、jqplot コードは正しく機能しました。

jQuery(function ($) {
    $.jqplot('chart1', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
}

4 に答える 4