jqplot円グラフが正しく表示されません。

Question

ログメッセージの取得：円の直径が小さすぎ、レンダリングされません。

その後、私がホバーまたはページ内でクリックしたときに私が手に思える：キャッチされない例外TypeErrorを：

<div id="weeklyProjectSummary"></div> 

：ここでプロパティを読み取ることができません「0」

<link href="/Content/jqPlot/jquery.jqplot.css" rel="stylesheet" type="text/css" /> 
    <script src="/Scripts/jquery.jqplot.js" type="text/javascript"></script> 
    <script src="/Scripts/jqplot.pieRenderer.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(function() { 
      //GetWeeklyProjectSummary(); 
      Test(); 
     }); 

     function Test() { 
      var data = [["987 Project",74],["ABC Project",68],["XYZ project",26]]; 
      var plot1 = jQuery.jqplot('weeklyProjectSummary', [data], 
       { 
        seriesDefaults: { 
         // Make this a pie chart. 
         renderer: jQuery.jqplot.PieRenderer, 
         rendererOptions: { 
          // Put data labels on the pie slices. 
          // By default, labels show the percentage of the slice. 
          showDataLabels: true 
         } 
        }, 
        legend: { show: true, location: 'e' } 
       } 
      ); 
     } 
    </script> 

未定義のは、divのそのはに起こっています

ここに私がページに載っているものがあります：

詳細が必要な場合は教えてください。

Answer 1

blueprintcssでjqplotを使用すると、同様の問題が発生しました。画面キャプチャに基づいて、私はあなたがblueprintcssを使用していると考えています。

は、次の行を削除してください：

legend: { show: true, location: 'e' } 

をし、それが適切にレンダリングするかどうかを確認します。

（編集：ここでは詳細情報：

https://bitbucket.org/cleonello/jqplot/issue/48/legends-doesnt-look-nice-when-using）

Answer 2

JQPlotのグラフ定義が正しいようです。パイは私の画面上で正しく表示されます。

jquery.jsまたはjquery.min.jsが含まれていません。コード内でこのファイルへの参照があることを確認できますか？

また、すべてのjs/cssファイルが正しく参照されていることを確認してください（JSView Firefox Extensionを使用して、実際に含まれていることを素早く確認できます）。

Answer 3

canvas.min.jsを含めます。ダウンロードの例で見つけることができます。それは伝説と私のために働いた。

Answer 4

私は私のCSSファイルに次の行を追加しました：

.jqplot・テーブル伝説{幅：自動; }

jqplotのCSSファイルからプロパティをオーバーロードする。

私のために働きました。

Answer 5

私はちょうどAmaud Tから答えを拡張したい：

私は同じ問題に直面し、私はいくつかの小さな修正を加えて、上記の答えを使用：

<style type="text/css"> 
    #chartComponentId table.jqplot-table-legend { width: auto !important;} 
</style> 
<div id="chartComponentId" class="chartComponent"> 
... 
</div> 

により使用のニーズに！重要な、このスタイルシートを特定のdivオブジェクトにバインドすると、他の要素への副作用が防止されます。