Javascript 访问ionic项目中highcharts click事件中的函数

我试图访问point click事件中的一些变量和函数，但我认为由于作用域的原因，我无法让它工作。我曾尝试为类定义一个变量，以便它可以访问，但这与我的另一个变量不兼容。功能也是如此

这很混乱。我需要澄清，userData初始化为数组，但当选择每个点时，它会变成一个对象，因为调用了select（）函数。这是因为图表数据不是userData[]的副本，而是isuserData[]

好的，我这里有一些不同功能的函数

nextDay（）将x值增加1并选择该点

variablePlus（）将y值增加1

dataUpdater（）更新本地y值以匹配userData列表中的值，并在HTML页面上显示该值

图表中的相关代码。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'
        }]
    });
}

---

首先，我鼓励您使用

highcharts

wrapper。可在此处下载：。

我试图访问点中的一些变量和函数 点击事件

要从组件对象访问属性和方法，可以采用以下方法：

在构造函数中保存组件引用，稍后将在下面定义的图表选项对象中使用该引用。您还需要保存对component属性的图表引用，因为您在其他方法中使用它，例如nextDay（）（Docs:）。查看我在下面发布的演示

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>

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;
  }
}

演示：

---

我试着让它发挥作用，但我不确定是否有可能在爱奥尼亚项目中按照你的方式来做。真的很感谢你的回答！