2

HTML テーブル内で Dojo (1.7.3) のチャート コンポーネント ( dojox.charting.chart) を使用しています (これは、他の誰かが提供した一種のテンプレートであり、チャートを未知の場所に配置する必要があるため、変更できません)。

実際には (単純化された) HTML コードは次のようになります。

<table class="fit-parent">
 <tbody>
  <tr>
   <td>
    <div id="chart123" class="full-size-chart"></div>
   </td>
  </tr>
 </tbody>
</table>

そして、その CSS は次のようなものです (とfull-size-chart同等と考えてfit-parentください):

.fit-parent
{
 width: 100%;
 height: 100%;
}

チャートを作成するコード:

<script type="text/javascript">
    require([
            "dojox/charting/Chart",
            "dojox/charting/themes/MiamiNice",
            "dojox/charting/plot2d/Columns",
            "dojo/domReady!"
        ],
        function (Chart, theme, ChartType) {
            var chart = new Chart("chart123");

            chart.setTheme(theme);

            chart.addPlot("default", {
                type: ChartType
            });

            chart.addSeries("Series name", chartData);

            chart.render();
        }
    );
</script>

レンダリングされた表は、ヘッダーとエッジ・パネルの両方を持つ他の Dojo コンテナー (BorderContainerおよび) 内に挿入されます。ContentPaneサイトは ASP.NET MVC3 で作成され、上記のコードは 1 つのビュー ページ内にあり、メイン レイアウトは_Layout.cshtmlページ内にあります。

問題は、グラフのサイズが正しくないことです。ページのサイズよりも大きく、スクロールが表示されます。理想的には、テーブルはコンテンツ ボックスに収まるようにし、ウィンドウ サイズに合わせてサイズを変更する必要があります。

レイアウトスケッチ

緑色のボックスはテーブルです (この例では 2 行)。グラフは行全体を埋める必要があります (幅と高さが 100% であるため)。コード/レイアウトが間違っていますか? HTML を変更する (および CSS クラスを使用する) ことはできますが、CSS フロート/位置を直接使用したり、CSS を使用して最終的なレイアウトを「想像」するように依頼することはできません (おそらく、単純な HTML エディターまたはメモ帳を使用します)。

4

1 に答える 1

3

Chart は、CSS セットのサイズもパーセント単位のサイズもサポートしていません。チャートのサイズは、作成前にそのノードにピクセル単位で直接指定するか、作成中に 2 番目と 3 番目のパラメーターとして指定する必要があります。流動的なレイアウトをサポートする場合は、単純な JavaScript トラッキング コードを使用し、必要に応じてグラフのサイズを変更します。

于 2012-07-09T15:25:48.780 に答える