无法让我的highchart在角5响应

Question

我正在使用角5 Highcharts显示饼图。我已经创建多个图表，并将它们存储在一个图表阵列和用于ngFor指令来显示它们。

我component.ts文件及component.html文件

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { Chart } from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import { AuthorCountService } from '../services/author-count.service';
import { Company } from '../shared/company';

@Component({
  selector: 'app-details-body',
  templateUrl: './details-body.component.html',
  styleUrls: ['./details-body.component.scss']
})
export class DetailsBodyComponent implements OnInit {

  constructor(private authorCountService : AuthorCountService) { }

  companyList : Company[];  

  chartList : Chart[] = [];

  ngOnInit() {
    this.authorCountService.getJsonData().subscribe((res) => {
      this.companyList = res;
      console.log(this.companyList);      
      this.companyList.forEach((company) => {        
        let chartitem = new Chart({
          chart : {
            plotBackgroundColor : null,
            plotBorderWidth : null,
            plotShadow : false,
            type : 'pie'
          },
          title : {
            text : company.companyname
          },
          tooltip : {
            pointFormat : '<b>{point.y}</b>'
          },
          plotOptions : {
            pie : {
              allowPointSelect : true,
              cursor : 'pointer',
              dataLabels : {
                enabled : true,
                format : '<b>{point.name}</b><br>{point.y}'                              
              }              
            }
          },
          series : [
            {
              "data" : [
                {"name" : 'Male', "y" : company.authorcount.male},
                {"name" : 'Female', "y" : company.authorcount.female}
              ]
            }
          ]                    
        });        
        this.chartList.push(chartitem);
      });
      console.log(this.chartList);          
    });
  }
}

.first-item {
    margin-top: 65px;
}

<section class="first-item">
    <div class="text-center container-fluid">
        <h2>Unique Author Count</h2>
        <p>The number of unique authors for each competitor is</p>
        <div class="row">
            <div *ngFor="let chart of chartList" [chart]="chart"></div>
        </div>
    </div>
</section>

它工作正常，但我想使这些图表响应。在网上搜索后，我尝试添加的响应选项，但我得到一个错误信息说“的属性类型‘响应’是不相容的”。

我要去哪里错了呢？是否有另一种方式让我的图表回应？

Answer 1

与Highcharts工作时，我有完全相同的问题。我跟着这个教程迪伦梦想。他是用一种称为gridstack框架。

链接：https://dylandreams.com/2017/05/06/of-charts-and-dashboards/

<div class="container-fluid">
<div class="row">
    <div class="col-md-12">
        <div class="grid-stack" id="grid">
            <div class="chart-container" data-gs-width="4" data-gs-height="4">
                <div class="grid-stack-item-content">
                    <div id="container"></div>
                </div>
            </div>
        <div class="chart-container" data-gs-width="4" data-gs-height="4" data-gs-x="4">
            <div class="grid-stack-item-content">
                <div id="container2"></div>
            </div>
        </div>
    </div>
</div>

看一看下面的jsfiddle

https://jsfiddle.net/fbn70fgb/5/

希望这可以帮助你

Answer 2

这是我的解决方案，并希望这将有助于给任何人。

ngOnInit() {

    this.innerWidth = window.innerWidth;
    this.chartOptions = {
      chart: {
        type: 'line',
        height: 120,
        width: this.innerWidth - 50
      },.....
   };

   this.chart = new Chart(this.chartOptions);
}

直接屏幕的变化和重新规划了它。

 @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.innerWidth = window.innerWidth;
    this.chartOptions.chart.width = this.innerWidth - 50;
    this.chart = new Chart(this.chartOptions);
  }