0

Estoy realizando un proyecto en angular (7) y al poner las gráficas de highchart (módulo highcharts-chart), me arroja el siguiente error por consola:

ERROR TypeError: Cannot read property 'series' of undefined

Lo raro es que el gráfico se muestra bien, pero creo que o le estoy pasando mal las variables, o mal inicializado o algo así, por lo tanto, aunque se me vea, me gustaría dejarlo sin errores de consola.

El codigo que tengo que es el siguiente.

Template HTML

<highcharts-chart [Highcharts]="Highcharts" [options]="graficoOptions"></highcharts-chart>

Controlador

this._contratosService.getEstados(localStorage.getItem('idCliente')).subscribe(
        async data => {
          this.graficoOptions= this._funcionesService.decodificarToken(data);
          for (let i = 0; i < this.arraySituaciones.length; i++) {
            this.array = this.array.concat([
              {
                name: this.arraySituaciones[i],
                y: this.arrayContadorContratos[i],
                selected: false
              }
            ]);
          }

          this.options = JSON.parse(this._GraficosService.graficosOption);
          this.graficoOptions= {
            lang: this.options,
            chart: { type: 'line' },
            exporting: {
              buttons: {
                contextButton: {
                  menuItems: [
                    'printChart',
                    'separator',
                    'downloadPNG',
                    'downloadJPEG',
                    'downloadPDF',
                    'downloadSVG',
                    'separator',
                    'downloadCSV',
                    'downloadXLS'
                  ]
                }
              }

            },
            title: { text: 'Estados de los contratos' },
            subtitle: {
              text:
                'Se muestran la cantidad de contratos que existen en cada estado.'
            },
            tooltip: {
              pointFormat:
                '<span style="color:{series.color}">Contratos: </span>: <b>{point.y}</b><br/>',
              shared: true
            },
            series: [
              {
                type: 'pie',
                allowPointSelect: true,
                keys: ['name', 'y', 'selected', 'sliced'],
                data: this.array,
                showInLegend: true
              }
            ],
            plotOptions: {
              series: {
                cursor: 'pointer',
                events: {
                  click: function(e) {
                    console.log('1234');
                  }
                }
              }
            },
            credits: { enabled: false }
          };
        });
3
  • 1
    Necesitaría ver todo el componente para hacerme una idea de dónde puede estar el fallo. Puede ser que this.graficoOptions sea undefined hasta que responda tu llamada Commented el 25 mar. 2019 a las 11:15
  • Hola, esta inicializado así graficoOptions: any;, tienes razón, ¿puede que vayan por ahí los tiros no?
    – Diego
    Commented el 25 mar. 2019 a las 11:19
  • que tal si haces algo como <highcharts-chart *ngIf="graficoOptions"[Highcharts]="Highcharts" [options]="graficoOptions"></highcharts-chart> Commented el 5 ago. 2019 a las 14:59

1 respuesta 1

3

El error se presenta porque estas declarando el grafico al inicio del template, al ingresar al componente las series están indefinidas porque no le llega ningún valor, pero luego cuando lo declaras en el método lo vuelve a reconstruir por eso se visualiza el gráfico

Debes definir el valor por defecto de graficoOptions quedaria de la siguiente forma:

  graficoOptions: Highcharts.Options = {
    chart: {
      type: 'column'
    },
    series: [
      {
        data: [],
        type: 'column'
      }
    ]
  };

Añado un ejemplo en stackblitz donde pueden ver la solución del error

5
  • 3
    puedes mejorar tu respuesta, que harias para evitar el error; si bien la respuesta puede ayudar muchos pueden considerar que tu respuesta es de baja calidad Commented el 5 ago. 2019 a las 15:11
  • Como explica @JackNavaRow, sería genial que pongas un ejemplo verificable, o algo que respalde tu respuesta. Commented el 5 ago. 2019 a las 15:12
  • 1
    Claro, ahí añadí una posible solución al error Commented el 5 ago. 2019 a las 16:11
  • @JhonnyPerez edite un poco la respuesta para que sea acorde al sitio, para la proxima te invito a hacerlo tu, considero que fue una buena respuesta Commented el 5 ago. 2019 a las 18:14
  • Gracias @JhonnyPerez pero ya no puedo testearlo, paso mucho tiempo desde la pregunta.
    – Diego
    Commented el 7 ago. 2019 a las 5:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.