Highcharts量规未在Angular中显示

如何解决Highcharts量规未在Angular中显示

我正在使用Angular和Higcharts可视化一些数据。我已经使许多其他Highchart组件正常工作，现在我想使用压力表。我访问了Highcharts网站，并在其演示部分使用了示例。不幸的是，这不起作用。由于某种原因，量规为空白，但组件的其他部分却出现了。下面的示例：

我的代码如下：

TS文件

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

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

  chartOptions: any;

  Highcharts: typeof Highcharts = Highcharts;
  chartRef: Highcharts.Chart;
  updateFromInput = false;

  constructor() { }

  ngOnInit(): void {
    this.myChart();
  }

  chartCallback: Highcharts.ChartCallbackFunction = (chart) => {
    this.chartRef = chart;
  };

  myChart(){
    this.chartOptions = {
        chart: {
            type: 'solidgauge'
        },title: null,pane: {
            center: ['50%','85%'],size: '140%',startAngle: -90,endAngle: 90,background: {
                backgroundColor:
                    Highcharts.defaultOptions.legend.backgroundColor || '#EEE',innerRadius: '60%',outerRadius: '100%',shape: 'arc'
            }
        },exporting: {
            enabled: false
        },tooltip: {
            enabled: false
        },// the value axis
        yAxis: {
            stops: [
                [0.1,'#55BF3B'],// green
                [0.5,'#DDDF0D'],// yellow
                [0.9,'#DF5353'] // red
            ],linewidth: 0,tickWidth: 0,minorTickInterval: null,tickAmount: 2,title: {
                y: -70
            },labels: {
                y: 16
            }
        },plotOptions: {
            solidgauge: {
                dataLabels: {
                    y: 5,borderWidth: 0,useHTML: true
                }
            }
      }


}

    setTimeout(() => {
    window.dispatchEvent(
      new Event('resize')
    );
    },300);
   }

}

HTML文件

<p>speedo works!</p>

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;"
  [(update)]="updateFromInput"
  [callbackFunction]="chartCallback">
</highcharts-chart>

有人知道此代码有什么问题吗？我该如何修复它以便仪表真正显示出来？

如果有人可以推荐其他任何包装，我可以用它在量规上显示实时数据，我将不胜感激。该软件包应该易于使用，或者至少比Highcharts具有更多资源，在Highcharts可以找到教程等等。

谢谢！

解决方法

有一些小故障：

缺少highcharts-more模块。乞求将其导入

import HC_more from "highcharts/highcharts-more";
HC_more(Highcharts);

您的演示之所以无法运行，仅仅是因为没有内容可显示。解决此问题所需要做的就是在data对象中设置series。请记住，始终为每个系列添加系列类型。

   series: [
      {
        type: "gauge",data: [80]
      }
    ]

此外，我强烈建议Highhcarts官方文档，您可以在其中找到更多示例和说明。

API：
https://api.highcharts.com/highcharts/series.gauge
https://github.com/highcharts/highcharts-angular
演示：
https://stackblitz.com/edit/highcharts-angular-gauge