Доступ к функциям в событии щелчка старшего чарта в ионном проекте

Question

Я пытаюсь получить доступ к некоторым переменным и функциям в событии щелчка точки, но я не могу заставить его работать из-за области видимости, я предполагаю.Я попытался определить переменную для класса, чтобы она была доступна, но она не совместима с моей другой переменной.То же самое касается функции.

Это грязно. Мне нужно уточнить, что userData инициализируется как массив, но при выборе каждой точки она превращается в объект, потому что select ()функция называется.Это связано с тем, что данные диаграммы не являются копией userData [], а - это userData [].

Хорошо, поэтому у меня есть несколько функций с различной функциональностью.

nextDay () увеличивает значение x на 1 и выбирает точку

variablePlus () увеличивает значение y на 1

dataUpdater () обновляет локальное значение y для соответствия значению в списке userData и отображает значение на странице HTML.

соответствующий код из chart.ts:

export class ChartPage {

 private day = 0;
 private chart: any;
 public userData: any;
 private y: any;
 private static day: number; // Not used 

 constructor(public navCtrl: NavController, public navParams: NavParams) {

  this.userData = [18,14,15,15,15,13,13,12,14,14,14,14,14,14,15];
  this.y = this.userData[this.day];

 }

 nextDay() {
  if (this.day == this.chart.series[3].data.length){
    return
  }
  else {
    this.day++;
    this.chart.series[3].data[this.day].select();
    this.dataUpdater();
    }
 }

 variablePlus() {
  this.y++;
  this.chart.series[3].data[this.day].update({
    y:this.y
  });
  console.log(this.y);
  this.dataUpdater();
 }

 dataUpdater() {
 this.y = this.userData[this.day].y;

 let dayText = document.querySelector('#dayNum');
 dayText.textContent = (this.chart.series[3].data[this.day].x) + 1;
 }


 // Chart constructed on load
 ionViewDidLoad() {
  console.log('ionViewDidLoad ChartPage');
  this.chart = HighCharts.chart('container', {
        chart: {
            type: 'line',
            margin: [0,0,0,0]
        },
        legend: {
            enabled: false
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
            crosshair: true
        },
        yAxis: {
            title: {
                text: 'Y data'
            }
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                point: {
                    events: {
                        click: function() {
                            // Defined a day-variable for the class cause of scoping
                            // Doesn't matter since variablePlus() still works off other variable
                            // ChartPage.day = this.category;
                            // this.series.data[ChartPage.day].select();
                            // want to run dataUpdater() and update local day value
                        }
                    }
                }
            },
            line: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: [{
            name: this.typeData.name,
            data: this.typeData.data,
            color: 'blue'
        }, {
            name: this.otherData.name,
            data: this.otherData.data,
            color: 'orange'
        }, {
            name: 'Line attempt',
            data: [{x: 0, y: 16}, {x: 20, y: 16}],
            color: 'red'
        },{
            name: 'User defined',
            data: this.userData,
            allowPointSelect: true,
            color: 'green'
        }]
    });
}

Answer 1

Во-первых, я рекомендую вам использовать highcharts-angular упаковщик.Его можно скачать здесь: https://github.com/highcharts/highcharts-angular.

Я пытаюсь получить доступ к некоторым переменным и функциям в событии щелчка точки

Чтобы получить доступ к свойствам и методам из объекта компонента, вы можете использовать следующий подход:

В конструкторе сохраните ссылку на компонент, которую вы будете использовать позже в объекте опций диаграммы, определенном под ним.Вам также необходимо сохранить ссылку на диаграмму в свойстве компонента, поскольку вы используете его в других методах, например nextDay (), например (Документы: https://github.com/highcharts/highcharts-angular#chart-instance). Проверьте демонстрацию, которую я разместил ниже.

chart.component.html:

<div>
  <highcharts-chart 
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions"
    [callbackFunction]="chartCallback"
    [(update)]="updateFlag"
    [oneToOne]="oneToOneFlag"
    [runOutsideAngular]="runOutsideAngularFlag"
  ></highcharts-chart>
</div>
<button (click)="onNextDay()">Next point</button>

chart.component.ts:

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

@Component({
  selector: 'app-chart',
  templateUrl: './chart.component.html',
  styleUrls: ['./chart.component.scss']
})
export class ChartComponent implements OnChanges, OnInit {
  private Highcharts = Highcharts;
  private chartConstructor = 'chart';
  private updateFlag = false;
  private oneToOneFlag = true;
  private runOutsideAngular = false;
  private chartOptions: any;
  private chartCallback: any;
  private day = 0;
  private chart: any;
  private y: any = 0;
  public userData: any;

  constructor() {
    const self = this;

    self.chartCallback = chart => {
      self.chart = chart;
    };

    self.userData = [
      18, 14, 15, 15, 15, 13, 13, 12, 14, 14, 14, 14, 14, 14, 15
    ];
    self.y = self.userData[self.day];

    self.chartOptions = {
      xAxis: {
        crosshair: true
      },
      plotOptions: {
        series: {
          dataLabels: {
            enabled: true
          },
          point: {
            events: {
              click() {
                console.log(this);
                self.day = this.category;
                this.series.data[self.day].select();
              }
            }
          }
        }
      },
      series: [{
        name: 'Line attempt',
        data: [
          {x: 0, y: 16},
          {x: 20, y: 16}
        ],
        color: 'red'
      }, {
        name: 'User defined',
        data: self.userData.slice(),
        allowPointSelect: true,
        color: 'green'
      }]
    };
  }

  ngOnChanges() {
    console.log('updated');
  }

  ngOnInit() {
    console.log(this);
  }

  onNextDay() {
    if (this.day !== this.chart.series[1].data.length - 1) {
      this.day++;
      this.chart.series[1].data[this.day].select();
      this.dataUpdater();
    }
    console.log(this);
   }

  onVariablePlus() {

  }

  dataUpdater() {
    this.y = this.userData[this.day].y;
  }
}

Демонстрация: https://codesandbox.io/s/p54w049677