Угловой размер NVD3 в Angular Material $mddialog для заполнения содержимого диалога

Я использую angular-1.5.8, d3-3.5.17, nvd3-1.8.5 и angular-nvd3-1.0.9 с Angular Material. Я пытаюсь поместить директиву 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Диалог открывается только в полноэкранном режиме, если окна браузера достаточно малы.

Во всяком случае, у меня есть многочисленные проблемы с диаграммой типа scatterChart, Вот пара больших:

  • Точечная диаграмма с 16 точками очень мала! Я не хочу жестко кодировать ширину / высоту. Есть ли у NVD3 опция масштабирования, чтобы сказать "покажи вдвое больше, чем обычно"?
  • Если я сделаю браузер (Chrome) достаточно маленьким, mdDialog внезапно откроется на весь экран! И график NVD3 динамически расширяется, чтобы заполнить всю ширину! Довольно круто! Но высота графика остается прежней. Теперь у меня есть широкая диаграмма с крошечной высотой; кнопка закрытия mdDialog находится почти в верхней части экрана, с огромным пробелом под ним.
  • Если я вручную установить <md-dialog-content style="min-width=500px;min-height=300px"> Например, происходит то же самое: заряд NVD3 расширяется по горизонтали, чтобы заполнить ширину, но под диаграммой, над кнопкой закрытия, есть огромное пустое пространство.

Как мне заставить диаграмму NVD3 хорошо играть с mdDialog и заполнить всю область содержимого диалога?

0 ответов

Другие вопросы по тегам