ionic3 highchart在构建期间显示错误

Question

我试图在我的ionic3 aps中填充Gauge。离子过程中一切运行良好。但是，当我想构建应用程序时，它只显示错误并停止构建应用程序。我遵循的例子：https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-speedometer/

离子cordova构建android期间的错误：

Argument of type '{ chart: { type: string; plotBackgroundColor: null; plotBackgroundImage: null; plotBorderWidth: n...' is not assignable to parameter of type 'Options'. Types of property 'series' are incompatible. Type '{ name: string; data: number[]; tooltip: { valueSuffix: string; }; }[]' is not assignable to type '(SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions |...'. Type '{ name: string; data: number[]; tooltip: { valueSuffix: string; }; }' is not assignable to type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | ...'.

任何帮助都非常感谢。提前致谢

我的.ts和html文件如下：

import * as $ from 'jquery';
import * as d3 from "d3";
import * as c3 from "c3";
import * as HighCharts from 'highcharts';
import HighchartsMore from 'highcharts-more';
HighchartsMore(HighCharts);

ionViewDidLoad() {
	    /* for sppedometer.....*/
		HighCharts.chart('meter_container', {
  			chart: {
		        type: 'gauge',
		        plotBackgroundColor: null,
		        plotBackgroundImage: null,
		        plotBorderWidth: 0,
		        plotShadow: false
		    },
		    title: {
		        text: 'Oil Level'
		    },
		    pane: {
		        startAngle: -150,
		        endAngle: 150,
		        background: [{
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#FFF'],
		                    [1, '#333']
		                ]
		            },
		            borderWidth: 0,
		            outerRadius: '109%'
		        }, {
		            backgroundColor: {
		                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
		                stops: [
		                    [0, '#333'],
		                    [1, '#FFF']
		                ]
		            },
		            borderWidth: 1,
		            outerRadius: '107%'
		        }, {
		            // default background
		        }, {
		            backgroundColor: '#DDD',
		            borderWidth: 0,
		            outerRadius: '105%',
		            innerRadius: '103%'
		        }]
		    },

		    // the value axis
		    yAxis: {
		        min: 0,
		        max: 100,

		        minorTickInterval: 'auto',
		        minorTickWidth: 1,
		        minorTickLength: 10,
		        minorTickPosition: 'inside',
		        minorTickColor: '#666',

		        tickPixelInterval: 30,
		        tickWidth: 2,
		        tickPosition: 'inside',
		        tickLength: 10,
		        tickColor: '#666',
		        labels: {
		            step: 2,
		            rotation: 'auto'
		        },
		        title: {
		            text: 'km/h'
		        },
		        plotBands: [{
		            from: 0,
		            to: 70,
		            color: '#55BF3B' // green
		        }, {
		            from: 70,
		            to: 90,
		            color: '#DDDF0D' // yellow
		        }, {
		            from: 90,
		            to: 100,
		            color: '#DF5353' // red
		        }]
		    },

		    series: [{
		        name: 'Speed',
		        data: [80],
		        tooltip: {
		            valueSuffix: ' km/h'
		        }
		    }],
		    credits: {
		      enabled: false
		  }
		});
		/*==================*/
	   
	}	

<ion-content >
	<div id="meter_container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</ion-content>

Answer 1

可能你错误​​地导入了HighchartsMore。它应该像这样导入：

import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";

HighchartsMore(Highcharts);

您是否考虑过使用highcharts-angular官方Highcharts封装器进行Angular？它可以从这里下载：https://github.com/highcharts/highcharts-angular

演示：

• https://codesandbox.io/s/jnrx6y8wj9