2

jQPlot をヘッダーに含める必要がある特定の順序はありますか? 現在jQMobileを使用していますが、なぜかjqPlot BarRenderer.jsが認識されません...

<head>  
    <!-- CSS -->
  <link rel="stylesheet" href="./signup.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" /> 

  <!-- Modernizer -->
  <script type="text/javascript" src="./modernizr.custom.56582.js"></script>
  <!-- jquery -->
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

   <!-- simpleDiaglo2 -->
  <script src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.js"></script>
  <script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
  <!-- Bar Chart -->
  <script class="include" language="javascript" type="text/javascript" 
        src="./jquery-jqPlot/jquery.jqplot.js"></script>
 <script class="include" language="javascript" type="text/javascript" src="./jquery-jqPlot/plugins/jqplot.barRenderer.min.js"></script>

</head>
4

1 に答える 1

3

ロード順序の例としては、jQuery、jqplot、メインレンダラー、軸レンダラー、ポイントラベルなどがあります。順序はプロジェクトの依存関係に依存します。

あなたは良いCDNからのJSを含めています。しかし、あなたの例で<head>は、ページのにJavaScriptが含まれています。</body>ページの読み込み時間を短縮するには、タグのすぐ上にJSを含める必要があります。CSSをその領域に含める必要があります<head>。

新しく更新された公式のjqplotサンプルページ「棒グラフ」には、この読み込み順序がドキュメントとして示されています。

文書化された注文：

<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="../jquery.jqplot.min.css" />

実際のソースと公式ページのドキュメントの両方にエラーがあるように見えることに注意してください-jqplotが2回ロードされています。ただし、実際のソースのヘッダーにCSSを適切にロードします。この例では、不適切なJSを使用してフッターにCSSをロードしています。サンプルページの実際のJSロード順序は次のとおりです。

サンプルページの実際の注文：

<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- Additional plugins go here -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pieRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="../plugins/jqplot.pointLabels.min.js"></script>
<!-- End additional plugins -->

参照：http ：//www.jqplot.com/deploy/dist/examples/barTest.html、http： //developer.yahoo.com/performance/rules.html、個人的な経験

于 2013-01-08T22:52:27.350 に答える