Question

我在Angular 5中使用Highcharts来显示饼图。我创建了多个图表并将它们存储在Chart数组中，并使用ngFor指令显示它们。

我的component.ts文件＆amp; component.html文件

＆＃13;

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);          
    });
  }
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

它工作正常，但我想让这些图表响应。在线搜索后，我尝试添加响应式选项，但我收到一条错误消息，说明＆＃34;属性类型＆＃39;响应＆＃39;不相容＆＃34;。

我在哪里错了？还有另一种让我的图表响应的方法吗？

Answer 1

使用Highcharts时我遇到了完全相同的问题。我遵循了Dylan Dreams的这个教程。他正在使用一个名为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);
  }

无法在角度5中使我的高图响应

2 个答案: