Entonces, lo que estoy tratando de lograr es que debe haber una casilla de verificación antes del valor en el eje x y debe llamar a mi método test() vue cuando se cambia la casilla de verificación al hacer clic en ella. En este momento está llamando a test() cuando se llama al método buildChart().
buildChart() { const context = this; return { chart: { height: 500, type: 'columnrange', inverted: true, spacingLeft: 10, spacingRight: 10, }, xAxis: { showEmpty: false, title: null, type: 'category', labels: { useHTML: true, formatter() { // This is where i am rendering the checkbox, would like it to trigger my vue function which is within the current vue context. return `<input type='checkbox' onchange='${context.test(this.value)}'> ${this.value}`; }, }, }, }; } test(value) { console.log(value); }Esto no funcionará, el valor devuelto por una función de formatter se trata como una cadena.
Como solución, puede almacenar el valor de una etiqueta en un atributo data-* y agregar un evento de change después de crear el gráfico.
export default { methods: { test(value) { console.log(value); } }, data() { const context = this; return { chartOptions: { chart: { events: { load: function() { const labelGroup = this.xAxis[0].labelGroup; const checkboxes = labelGroup.div.getElementsByTagName('input'); for (const checkbox of checkboxes) { checkbox.addEventListener('change', function(e){ context.test(this.dataset.value); }) } } } }, xAxis: { showEmpty: false, title: null, type: 'category', labels: { useHTML: true, formatter() { return `<input type='checkbox' data-value=${this.value}> ${this.value}`; } } } } }; } };Demostración en vivo: https://codesandbox.io/s/highcharts-vue-demo-fork-j4ty16?file=/src/components/Chart.vue