Dojo的图表布局

Question

我在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制作的，上面的代码在一个视图页面内，主要布局在_Layout.cshtml页面内。

问题是图表大小不正确，它大于页面大小并显示滚动条。理想情况下，表格应该适合内容框，并根据窗口大小调整大小。

绿色框是表格（本例中为2行）。图表应填充整行（因为100％宽度和高度），表格布局正确（它填充“文档区域”，其他一切都很好）。我的代码/布局错了吗？请记住我可以更改HTML（并使用CSS类），但我不能要求他们直接使用CSS浮动/位置或用CSS“想象”最终布局（可能他们使用简单的HTML编辑器或记事本）。

Answer 1

图表不支持CSS集大小，也不支持百分比大小。您应该在创建之前或在创建第二个和第三个参数期间直接在其节点上以像素为单位指定图表大小。如果您想支持流畅的布局，请使用简单的JavaScript跟踪代码，并在需要时相应地调整图表大小。