highcharts - Angular5 - 具有配置的响应式 Highcharts 不起作用

Question

我正在尝试Highcharts使用Angular5来自https://www.highcharts.com/docs/chart-concepts/responsive的响应式配置进行响应，如下所示：

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

我正在使用angular-highcharts库来执行此操作typescript。以下是我的代码，其响应式配置与网站上提到的完全相同Highcharts：

import {Component, OnInit} from '@angular/core';
import {Chart} from 'angular-highcharts';
import * as Highcharts from 'highcharts';

@Component({
    selector: 'historical-health-data',
    templateUrl: './historical-health-data.component.html',
    styleUrls: ['./historical-health-data.component.less']
})

export class HistoricalHealthDataComponent {
chart: Chart;

ngOnInit() {
    this.chart = new Chart({                    
                    chart: {
                        type: 'column',
                        height: this.height,
                        style: {fontFamily: 'inherit'}
                    },
                    title: {
                        text: null
                    },
                    exporting: {
                        enabled: false
                    },
                    legend: {
                        enabled: false
                    },
                    credits: {
                        enabled: false
                    },
                    lang: {
                        noData: null
                    },                    
                    plotOptions: {
                        series: {
                            animation: true,
                            connectNulls: true,                            
                            marker: {
                                symbol: 'circle',
                                lineWidth: 1,
                                lineColor: '#fff'
                            }
                        },
                        column: {
                            states: {
                                hover: {
                                    enabled: false
                                }
                            },
                            pointPadding: 0,
                            borderWidth: 0.1,
                            pointWidth: 20,
                            dataLabels: {
                                enabled: false
                            }
                        }
                    },
                    xAxis: {
                        type: 'datetime',
                        tickInterval: 24 * 3600 * 1000,
                        labels: {
                            rotation: -60
                        }
                    },
                    yAxis: {
                        min: 0,                        
                        title: {
                            text: null
                        }
                    },                    
                    series: [{
                        data: [{
                            x: Date.UTC(2012, 0, 1),
                            y: 1
                        }, {
                            x: Date.UTC(2012, 0, 8),
                            y: 3
                        }, {
                            x: Date.UTC(2012, 0, 15),
                            y: 2
                        }, {
                            x: Date.UTC(2012, 0, 22),
                            y: 4
                        }],
                        pointRange: 24 * 3600 * 1000
                    }],
                    responsive: {
                      rules: [{
                        condition: {
                          maxWidth: 500
                        },
                        chartOptions: {
                          legend: {
                            enabled: false
                          }
                        }
                      }]
                    }
                });
            });

     }
}

历史健康数据.component.html：

<div [chart]="chart"></div>

通过完全按照Highcharts文档中所述添加响应式配置：https ://www.highcharts.com/demo/responsive我收到以下错误：

error TS2345: Argument of type '{ chart: { type: string; height: number; style: { fo
ntFamily: string; }; events: { click: () => v...' is not assignable to parameter of type 'Options'.
  Types of property 'responsive' are incompatible.
    Type '{ rules: { condition: { maxWidth: number; }; chartOptions: { legend: { enabled: boolean; }; }; }[...' is not assignable to type 'ResponsiveOptions[]'.
      Object literal may only specify known properties, and 'rules' does not exist in type 'ResponsiveOptions[]'.

我在这里做错了什么？有没有更好的方法来实现响应式图表？

我知道图表必须默认响应，但在我的情况下，这是当浏览器最小化为时 x 轴的行为方式< 700px：

x 轴正在扩展并位于页面上的下一个面板下方。

这就是它必须是或类似的方式：

标签： highchartsangular5responsive

Answer 1

我遇到了同样的问题，这是我的解决方案，希望对任何人都有帮助。它可能在大型数据集上存在性能问题。

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