5

我将 angular-1.5.8、d3-3.5.17、nvd3-1.8.5 和 angular-nvd3-1.0.9 与 Angular 材料一起使用。我正在尝试将 NVD3 指令放入$mdDialog. 源代码很简单：

<md-dialog aria-label="FooBar">
  <md-toolbar>
    <div class="md-toolbar-tools">
      <h2>FooBar/h2>
      <span flex></span>
      <md-button class="md-icon-button" ng-click="dialog.close()">
        <md-icon>close</md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-dialog-content>
    <nvd3 options="dialog.options" data="dialog.data"></nvd3>
  </md-dialog-content>

  <md-dialog-actions>
    <md-button ng-click="dialog.close()">
      Close
    </md-button>
  </md-dialog-actions>
</md-dialog>

我正在$mdDialog.show()使用fullscreen: true. 如您所知，即使fullscreen: true浏览器窗口足够小，对话框也只会全屏显示。

无论如何，我在使用 type 图表时遇到了很多问题scatterChart。这里有几个大的：

  • 一个 16 点的散点图显示得非常非常小！我不想硬编码宽度/高度。NVD3 是否有缩放选项来表示“显示两倍的尺寸”？
  • 如果我将浏览器（Chrome）做得足够小，mdDialog 会突然全屏显示！并且 NVD3 图表会动态扩展以填满整个宽度！很酷！但是图表的高度保持不变。现在我有一个高度很小的宽图表；mdDialog 关闭按钮几乎位于屏幕顶部，下方有一个巨大的空白。
  • 如果我手动设置<md-dialog-content style="min-width=500px;min-height=300px">只是一个例子，同样的事情会发生：NVD3电荷水平扩展以填充宽度，但图表下方，关闭按钮上方有一个巨大的空白区域。

如何让 NVD3 图表与 mdDialog 很好地配合，并填充整个对话框内容区域？

4

0 回答 0