0

我正在使用 dojo 1.7（内置到我正在使用的 Esri API 中）在地图弹出窗口中动态创建图表（当用户单击地图时触发）。

 var c = dojo.create("div", {
          id: "demoChart"
        }, dojo.create('div'));

设置图表属性（数据、主题等）后，如果我调用chart.render，图表会正确呈现，但大小错误（对于 infoWindow 容器 div 来说太大）。

但是，如果我调用chart.resize(175, 145)，图表确实会以正确的大小创建，但不会在第一次单击时创建，而是在第二次单击时创建。

要复制，请参阅此 JSFiddle，并参考 Javascript 中的第 49-53 行。

  map.infoWindow.setContent(c);
  // Chart Resize will resize the DIV as needed.
  // However, the initial click will not show the chart
  chart.resize(175, 145);
  // Chart Render shows the chart on first click, but does not resize the div
  //chart.render();

我的印象是调整大小方法包括在其中调用渲染。因此，我不太确定为什么会出现这种行为。

我需要知道需要更改哪些内容才能创建与它所在的父 div 大小相同的图表 div。

4

1 回答 1

1

图表以默认大小 (400 x 300px) 呈现的原因是图表节点 (div#demoChart) 没有任何尺寸。

此外，在图表节点 div 可见之前，它不会有任何实际尺寸（仅样式尺寸）供图表使用。然后它会回退到 300 x 400 像素的默认大小。

要使您的代码正常工作：

  1. 为 div 添加 CSS 样式

    #demoChart {
  width: 175px;
  height: 145px;
}

  2. 在显示信息窗口并且图表节点实际可见后创建图表。图表在实例化时获取它的尺寸（在 constructor() 方法中，而不是在您可能期望的 render() 方法中）。

我已经编辑了您的 JSfiddle 以使其工作（查看 JSfiddle）。

于 2013-01-17T11:01:58.063 回答