0

誰かがこれで運が良かったですか?

ここhttp://www.jqplot.com/deploy/dist/examples/barTest.htmlに正確なサンプルコードをコピーしてテキストエディタに貼り付けました。必要なすべての.jsファイルと.cssファイルを追加しました。いずれかのブラウザでページを実行すると、バーやアニメーションが表示されません。上記のURLのソースコードも見て、どのように機能するかを確認しました。デスクトップからではなく、URLでアニメーションの棒グラフを表示できる理由を誰かに教えてもらえますか?何が違うの?これが私がコピーした正確なコードです:

<html>
 <title>Untitled Document</title>

<link rel="stylesheet" href="js/jquery.jqplot.min.css" type="text/css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>


<script>

$(document).ready(function(){

        $.jqplot.config.enablePlugins = true;
        var s1 = [2, 6, 7, 10];
        var ticks = ['a', 'b', 'c', 'd'];

        plot1 =  $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }
            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }
            },
            highlighter: { show: false }
        });

        $('#chart1').bind('jqplotDataClick', 
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });
    </script>
</head>

<body>
<div id="chart1" style="margin-top: 20px; margin-left: 20px;width: 300px; height: 300px; position: relative;"></div>


<div><span>Moused Over: </span><span id="info1">Nothing</span></div>
</body>
</html>

そのコードを実行した後、ブラウザに表示されるものは次のとおりです。

ここに画像の説明を入力してください

ありがとう

4

1 に答える 1

3

興味のある人のために、私は答えを見つけました。私の投稿のbarchart.htmlページから取得したサンプルコードは、棒をアニメーション化するために条件付き構文(以下)を必要としないようです。

$.jqplot.config.enablePlugins = true;

// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
        animate: !$.jqplot.use_excanvas,

例ページのアニメーションの例から、次のコードでうまくいきます。

animate: true,
    // Will animate plot on calls to plot1.replot({resetAxes:true})
    animateReplot: true,

私はドキュメント全体を読み、コードをいじくり回していました。最終的に、私は完全な「例」ページにたどり着きました(ドキュメントに最初にリストされていたので、最初に表示したテストと例のページにリストされているものも少なくありません)。開発者がコードベースに大量の情報、コメント、更新を実際に提供するのに非常に時間がかかったので、私はプラグインコードを本当に理解したかったのです。

于 2012-08-27T21:38:00.457 に答える