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 回答