2

我在dojox.charting.chartHTML 表中使用 Dojo (1.7.3) 的图表组件 ()（我无法更改它，因为它是其他人提供的一种模板，我必须将图表放在未知位置）。

实际上（简化的）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 编辑器或记事本）。

4

1 回答 1

3

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

于 2012-07-09T15:25:48.780 回答