时间戳

首页 > 解决方案 > Highcharts Angular - 如何使用百分比设置图表宽度和高度？

html - Highcharts Angular - 如何使用百分比设置图表宽度和高度？

问题描述

我正在尝试根据它周围的空间来设置图表的宽度和高度。该图表目前处于模态，我希望它占据整个空间。为了做到这一点，我需要用百分比设置宽度和高度，但我无法做到这一点。图表大小似乎设置为默认值，除非我在图表的选项中这样做，否则无法更改，如下所示：

chartOptions: Options = {
    title: {
      text: 'CDF of the most frequent update frequency',
      style: {
        color: 'whitesmoke'
      }
    },
    chart: {
      zoomType: 'x',
      backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
            stops: [
                [0, '#2a2a2b'],
                [1, '#3e3e40']
            ]
        },
      borderColor: 'black',
      borderWidth: 2,
      width: 1000,
      height: 500
    },

这允许我只用像素设置大小，这不是我需要的。这是设置html页面的方式：

<h4 mat-dialog-title>
        <mat-toolbar class="task-header">
            <span class="titolo">Most Frequent Update Frequency CDF</span>
            <button mat-icon-button mat-dialog-close class="icona">
                <mat-icon mat-list-icon>close</mat-icon>
            </button>
        </mat-toolbar>
</h4>
<mat-dialog-content>
  <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions"></highcharts-chart>
</mat-dialog-content>

标签： htmlangularhighchartsmodal-dialogsize

解决方案

从 highchart 的配置对象中删除width和。它们都默认为以下行为（取自文档）：heightchartnull

  • height：默认情况下（当null）高度是从包含元素的偏移高度计算的，如果包含元素的高度是 ，则为 400 像素0。
  • 宽度： 默认情况下（当null）宽度是根据包含元素的偏移宽度计算的。

唯一要做的就是height在width包含的<mat-dialog-content>. 这就是为什么它们需要明确的原因：

  • 默认情况下，MatDialog 组件尝试渲染尽可能小，但足以适应内容。
  • 另一方面，Highcharts 正试图扩大到可用空间。

所以我们有一个父母试图缩小孩子，一个孩子试图成长为父母。
含义：您需要为MatDialog提供明确的大小，否则父级会缩小子级，而子级将没有空间可以增长（实际上，对话框上有一个最小宽度，图表也默认高度为400px当它检测到0高度时 - 以对抗缩小的父母）。

在对话框上设置显式大小的最方便的方法可能是在这个特定的 MatDialog 实例上放置一个自定义类，panelClass使用.open(). 例如：

const dialogRef = this.dialog.open(HighchartsDialogComponent, {
  panelClass: 'highcharts-modal'
});

现在您可以使用 CSS 来设置模态框的显式大小：例如：

.cdk-overlay-pane.highcharts-modal {
   /*
    use any valid CSS explicit sizing: %, px, em, vw,...
    don't use `auto` (not explicit - will result into `0`)
    */
   width: 80vw;
   height: 80vh;
}

旁注：默认情况下，.cdk-overlay-pane注入一些内联样式，其中一个max-width: 80vw;. 如果您希望图表比这更宽，则必须使用!importantCSS 覆盖它。

另一个注意事项：MatDialog 提供设置height和width通过配置（我们指定的位置panelClass）的选项。如果设置，它们将作为内联样式传递给同一个面板元素。

我更喜欢样式表中的 CSS，而不是配置选项中的 CSS，因为它具有允许@media查询的额外好处。但是，如果您更喜欢该配置，它也可以。

推荐阅读