时间戳

首页 > 解决方案 > 如何使用 Angular 修改 Highcharts 标签中的样式属性？

angular - 如何使用 Angular 修改 Highcharts 标签中的样式属性？

问题描述

我的 html 页面中有这段代码：

            <div *ngIf="loading && chartOptionsXrange">
                <highcharts-chart 
                    [Highcharts]="Highcharts" 
                    [options]="chartOptionsXrange"
                    [(update)]="updateFromInput" 
                    style="width: 100%; height: 850px; display: block;">
                </highcharts-chart>
            </div>

我想将样式值与我组件中的变量绑定。我试过这个：

 [style]="xrange"

在我的组件中：

xrange = 'width: 100%; height: 800px; display: block'

但它不起作用。事实上，我想根据要显示的元素数量来调整高度。

怎么做到呢？

标签： angularhighcharts

解决方案

要使用 JavaScript 变量设置元素样式，您可以使用[ngStyle]指令。

<div [ngStyle]="myStyle">Div styled with the JS</div>

export class AppComponent  {
  ...

  myStyle = {
    'height.px': 200,
    'width.px': 200,
    background: 'red',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
    'color': 'white',
  }
}

现场演示：
https ://stackblitz.com/edit/angular-ngstyle-showcase?file=src%2Fapp%2Fapp.component.html

但是在这种情况下，我会推荐另一种解决方案。无需设置图表容器的样式，您只需在chartOptions.

export class AppComponent {
  Highcharts: typeof Highcharts = Highcharts;

  heightCondition = Math.random() > 0.5 ? 200 : 500;

  chartOptions: Highcharts.Options = {
    chart: {
      height: this.heightCondition
    },
    title: {
      text: `Height: ${this.heightCondition}px`
    },
    series: [
      {
        type: "line",
        data: [1, 2, 3]
      }
    ]
  };
}

现场演示：
https ://stackblitz.com/edit/highcharts-angular-basic-line-uiq1sn?file=src/app/app.component.ts

推荐阅读