highicart ionic3 показывает ошибку во время сборки - PullRequest
Новая
       23

highicart ionic3 показывает ошибку во время сборки

1 голос
/ 21 апреля 2019

Я пытаюсь заполнить Gauge в моих ionic3 апс.Все хорошо работает во время ионной подачи.Но когда я хочу создать приложения, он просто показывает ошибку и прекращает создавать приложения.пример, которому я следовал: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/gauge-speedometer/

ошибка во время сборки Android ионной Cordova: 

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>

1 Ответ

0 голосов
/ 23 апреля 2019

Возможно, вы импортировали 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

Демо:

...