Access component methods in a Tooltip Action #98
Description
Hello!
I would like to know how to access component methods and data from an action defined in the method "onChartReady()".
My problem is that I want to call this.getXYFromSelection() and this.colorize() in a tooltip action (see below). For the moment the error message is Uncaught TypeError: this.getXYFromSelection is not a function at Object.action.
Moreover, can you give us the documentation of onChartReady and the type of its parameters?
Thank you.
<template> <div> <GChart type="ScatterChart" :data="chartData" :options="chartOptions" @ready="onChartReady" ref="gChart" /> </div> </template> <script> import { GChart } from 'vue-google-charts'; export default { components: { GChart }, props: { produits: Array }, data () { return { // blah blah headerChartData: [ { label: 'Prix de vente TTC', type: 'number' }, { label: 'Marge HT', type: 'number' }, { type: 'string', role: 'style' }, { type: 'string', role: 'tooltip' } ], chartData: [], chartOptions: { hAxis: { title: 'Prix de vente TTC' }, vAxis: { title: 'Marge HT' }, legend: 'none', crosshair: { trigger: 'both' }, width: 800, height: 600, tooltip: { trigger: 'both', isHtml: true } } }; }, methods: { getXYFromSelection (selection) { const row = selection[0].row + 1; const XDot = this.chartData[row][0]; const YDot = this.chartData[row][1]; return { prixVenteTtc: XDot, margeHt: YDot }; }, onChartReady (chart, google) { chart.setAction({ id: 'colorize', text: 'Coloriser', action: function () { const selection = chart.getSelection(); const XYDot = this.getXYFromSelection(selection); this.colorize(XYDot); } }); }, fillChartData (produits) { // blah blah }, colorize (reference) { // blah blah } }, watch: { produits: function (value, oldValue) { this.fillChartData(value); this.colorize(null); } } }; </script>