Блог

Первый раз работаю с highcharts-vue .

У меня есть следующие глобальные параметры диаграммы, которые я импортирую в свой app.js . Именно здесь я добавил кнопку в меню экспорта, чтобы обеспечить download CSV / XLSX функциональность maatwebsite/laravel-excel , поскольку окончательный экспорт будет включать дополнительные столбцы, отображаемые на диаграмме (в отличие от простой загрузки данных диаграммы через ее плагины CSV / XSLX).

Я хотел бы передать URL-адрес в раскрывающийся список кнопки экспорта на диаграмме, но мне это не удалось. Как мне передать prop (целевой URL-адрес для запроса данных) в эту конфигурацию?

У меня есть несколько экземпляров диаграммы на странице, и для каждого из них потребуется свой собственный целевой URL.

Любые предложения приветствуются.

 export const highChartConfig = function(page) {
    return {
        credits: {
            enabled: false
        },
        title: {
            align: 'center',
            style: {
                color: "#4B5563",
                fontSize: "16px",
                fontWeight: "300",
            },
        },
        exporting: {
            buttons: {
                contextButton: {
                    menuItems: [{
                        textKey: 'printChart',
                        onclick: function () {
                            this.print();
                        }
                    }, {
                        separator: true
                    },{
                        textKey: 'downloadCSV',
                        onclick: function () {

                            // THIS PROP I WOULD LIKE TO PASS TO THIS POINT. I GET UNDEFINED HERE
                            console.log(this.downloadCsvRoute)

                            if (this.downloadCsvRoute amp;amp; this.downloadCsvRoute != '') {   
                                axios.get(this.downloadCsvRoute)
                            }
                        }
                    }]
                }
            }
        },
    }
}
 

this Ключевое слово в функции обратного вызова onclick ссылается на диаграмму, используйте функцию arrow для получения внешней this ссылки:

 buttons: {
  contextButton: {
    menuItems: [..., {
      textKey: 'downloadCSV',
      onclick: () => {

        if (this.downloadCsvRoute amp;amp; this.downloadCsvRoute != '') {
          axios.get(this.downloadCsvRoute)
        }
      }
    }]
  }
}
 

API Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions