javascript - Highcharts - 无法在角度 6 中调整 onclick 按钮的大小
问题描述
我有一个角度为 6 的 Highcharts,它工作正常,但是每当我单击一个按钮时,我想通过添加类来调整其大小/增加它的宽度。div 增加了,但图表没有增加。我尝试了 reflow 和 window resize 属性,但它没有已解决。任何人都可以帮助我。这是下面的代码。
app.component.html
<button (click)="change()">change</button>
<div [ngClass]="{'old': toggle, 'new': !toggle}" class="old" id="chart1"></div>
app.component.ts
declare var require: any;
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements ResultPageInterface{
title = 'projectchart';
toggle:boolean = true;
change(){
this.toggle = !this.toggle;
}
ngOnInit(){
this.chartFunc('chart1');
}
chartFunc(chartId){
Highcharts.chart(chartId,{
chart: {
type: "spline"
},
title: {
text: "Monthly Average Temperature"
},
series: [
{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,26.5, 23.3, 18.3, 13.9, 9.6]
}
]
});
}
}
包.json
{
"name": "projectchart",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"core-js": "^2.5.4",
"highcharts": "^7.1.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
解决方案
看; 调整图表 div 容器的大小并不总是调整图表本身的大小。
试试我的解决方案:
将图表声明为组件变量:
chartElement: Highcharts.Chart;
使用图表模块创建图表。
import { chart } from 'highcharts'; ... ngOnInit() { // this.chart = chart(chartId, {chart: {}...}) }
使用
this.chart.redraw()
函数调整图表大小。
推荐阅读
- typescript - Typescript autocomplete
- appium - Instantiating Appium IOS/Android driver
- unity3d - Unity AR How can i trigger a button in the scene?
- wordpress - Woocommerce 中的可变产品批量折扣
- apache-spark - INSERT OVERWRITE 语句中的列列表规范
- angular5 - 如何使用angular 5打开一个excel文件
- presto - prestodb get user identity in a stored procedure
- ios - CMPedometer queryPedometerData() returning 0 steps when steps exist
- ios - 无法连接到lockdownd。在 Ubuntu 上退出
- apache-spark - Do spark tasks(per executor) share cache location?