1
votes

Comment réparer "La propriété 'type' est manquante dans le type mais requise dans le type 'SeriesXrangeOptions'" dans le module angular highcharts

J'essaie d'afficher une vue graphique des prix de la crypto-monnaie sélectionnée dans la liste des crypto-monnaies, mais j'obtiens une erreur d'incompatibilité de type.

J'ai utilisé le module angular-highcharts dans mon application et importé la bibliothèque de graphiques de ce module.

import { Chart } from 'angular-highcharts';

series: [{
  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{
  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

J'obtiens l'erreur ci-dessous dans toutes les lignes ci-dessus:

Tapez '{nom: chaîne; données: {id: any; nom: tout; y: n'importe lequel; } []; }' est non attribuable au type 'SeriesAbandsOptions | SeriesAdOptions | SeriesAoOptions | SeriesApoOptions | SeriesAreaOptions | SeriesArearangeOptions | SeriesAreasplineOptions | SeriesAreasplinerangeOptions | ... 82 de plus ... | SeriesZigzagOptions '.

La propriété 'type' est manquante dans le type '{name: string; données: {id: any; nom: tout; y: n'importe lequel; } []; } 'mais obligatoire dans le type 'SeriesXrangeOptions'.ts (2322) highcharts.d.ts (339172, 5):' type 'est déclaré ici.

Je devrais avoir une vue graphique de la crypto-monnaie sélectionnée montrant le volume sur 24 heures et le prix.

typescript angular highcharts

2 commentaires

Qu'est-ce que comparearray ?

comparearray est un tableau qui a été déclaré à l'intérieur du composant.

4 Réponses :

1
votes

series: [{

  type: 'xrange`,

  name: 'Price',
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{

  type: 'xrange`,

  name: "Volume_24h",
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

5 commentaires

J'ai donné le type «xrange» dans mon composant de graphique de prix et l'erreur a disparu. Mais dans la console du navigateur, je reçois l'erreur "PricechartComponent.html: 3 ERROR Error: Highcharts error # 17: www.highcharts.com/errors/17

Cette erreur se produit probablement parce que vous n'avez pas chargé le module xrange , n'est-ce pas?

l'erreur se produit dans la ligne ci-dessous dans le fichier html du tableau des prix.

Quelqu'un peut-il aider ici?

@amitabha Quelle erreur? Quel fichier HTML? Veuillez fournir plus d'informations. Vous pouvez modifier la question afin de savoir quel est le problème. En outre, une démo en direct vous aidera.

5
votes

A également reçu la même erreur "SeriesXrangeOptions", mais xrange n'était pas une option de type valide. La spécification du type de graphique en série fonctionnait pour ceux qui recevaient une erreur de type non valide.

Exemple de travail:

chart = new Chart({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Linechart'
    },
    credits: {
        enabled: false
    },
    series: [{
        type: 'line',
        name: 'Jane',
        data: [1, 0, 4, 6, 11]
    }, {
        type: 'line',
        name: 'John',
        data: [5, 7, 3, 2, 9]
    }]
});

0 commentaires

1
votes

Essayez

new Chart({YOUR_OPTIONS} as any);

Cela corrigera l'erreur.

0 commentaires

2
votes

Lorsque vous utilisez plusieurs séries dans vos graphiques, vous devez mentionner le type de série. Changer simplement votre code pour cela fonctionne parfois:

 series: [{
  name: 'Price',
  type:undefined,
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.price
  }]
},
{
  name: "Volume_24h",
  type:undefined,
  data: [{
    id: this.comparearray[0].symbol,
    name: this.comparearray[0].name,
    y: this.comparearray[0].quotes.USD.volume_24h
  }]
}]

Essayez-le une fois. J'espère que cela vous aidera à résoudre votre problème.

0 commentaires