プラグインを使用Chart.jsしてデータポイントをドラッグしています。グラフをカスタマイズするには、オブジェクトを渡す必要があり、イベントが発生すると、オプションとともに渡されるコールバックがトリガーされます。イベントがトリガーされたときにオブジェクトのデータセットを変更したい。操作を実行できるように、イベントをその範囲外にするにはどうすればよいですか。optionsdragEndoptions
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit {
@ViewChild('myChart') myChart: BaseChartDirective;
public chartInstance: Chart;
public context: CanvasRenderingContext2D;
public options: any = {
type: 'line',
data: {
labels: [2010, 2011, 2012, 2013, 2014],
datasets: [
{
label: 'Marks',
data: [120, 90, 30, 50, 20, 30],
borderWidth: 3,
borderColor: "#00a2e8",
fill: false
}
]
},
options: {
dragDataRound: 0,
dragData: true,
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
},
onDragEnd: function (e, datasetIndex, index, value) {
console.log('Event Triggered'); // This works fine.
//Here I want to trigger a function outside its scope.
this.dragEndEvent(e, datasetIndex, index, value);
}
}
};
dragEndEvent(e, datasetIndex, index, value) {
//Do some manipulations on the myChartOptions object.
// When this event is triggered, I cannot acccess options object.
// console.log(this.options);
//Error: Cannot read property 'options' of undefined
}
constructor() { }
ngOnInit() {
}
ngAfterViewInit(): void {
this.chartInstance = new Chart(this.myChart.ctx, this.options);
}
}
このコンテキストを参照するには、矢印関数を使用する必要があります
これを試して：
public myChartOptions = {
type: 'line',
data: {...},
options: {
dragData: true,
dragX: false,
dragDataRound: 0,
dragOptions: {
magnet: {
to: Math.round
}
},
onDragEnd: (e, datasetIndex, index, value) => {
console.log('Event Triggered'); // This works fine.
//Here I want to trigger a function outside its scope.
this.dragEndEvent(e, datasetIndex, index, value);
}
}
}
dragEndEvent(e, datasetIndex, index, value) {
//Do some manipulations on the myChartOptions object.
// This is not getting triggered.
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加