Как после выбора пункта в меню highcharts менять его название?

Question

Есть данные графики, для которых надо было сделать появление таблички при выборе пункта. Вот только стандартная функция не поддерживает заголовок у таблицы в формате html, хотя заголовок у графика поддерживает нормально. Сделал через добавление новой кнопки в меню, через menuItemDefinitions внутри exporting, но как её текст перезаписывать после выбора? Нужно чтобы, как при стандартном выводе было. Менялось View data table на Hide data table и наоборот. Код, который есть сейчас и фото как хотелось бы приведены ниже:

var html = '<div style="display: inline-block"></div>';
html += '<div style="display: inline-block; margin-left: 20px; cursor: pointer;" class="description-title" id="">';
html += '<img style="width: 20px;" src="https://img.icons8.com/ios/500/info--v1.png" alt="Info">';
html += '</div>';
new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
 },
 title: {
    text: html,
    useHTML: true,
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Опрошено'
    }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90],
    color: '#FF0000',
    states: {
        inactive: {
            enabled: false
        }
    }
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70],
    states: {
        inactive: {
            enabled: false
        }
    }
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }],
 exporting: {
        menuItemDefinitions: {
            // Custom definition
            label: {
                onclick: function() {
                  if (this.dataTableDiv && this.dataTableDiv.style.display !== 'none') {
                    this.text = "View data table";// Присваивается, но не отображается в меню
                    this.dataTableDiv.style.display = 'none';
                    this.dataTableDiv.querySelector(".highcharts-table-caption").innerHTML = html;
                  } else {
                    this.viewData();
                    this.text = "Hide data table";// Присваивается, но не отображается в меню
                    this.dataTableDiv.style.display = '';
                    this.dataTableDiv.querySelector(".highcharts-table-caption").innerHTML = html;
                  }
                },

                text:"View data table",
            }
        },
        buttons: {
            contextButton: {
                menuItems: ["viewFullscreen", "printChart", "separator", "downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG", "separator", "downloadCSV", "downloadXLS", 'label']
            }
        }
    }
});

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/accessibility.js"></script>
<div id="chart_1" class="chart"></div>

Answer 1

А решение-то было проще, чем я думал. Просто вместо this.text = "Hide data table"; надо было написать

document.getElementsByClassName("highcharts-menu-item")[8].innerHTML = "Hide/View data table";

Что решило проблему

Answer 2

Для обновления существует метод update. Вместо обычного присваивания, нужно вызвать этот метод с нужными для вас параметрами в качестве входного аргумента.

Вместо

label: {
 onclick: function() {
 // ...
  this.text = 'Hide data table';
 // ...
 }
}

Должно быть

label: {
 onclick: function() {
 // ...
  this.exporting.update({ // Обновление menuItemDefinitions.label.text
    menuItemDefinitions: {
      label: {
         text: 'Hide data table'
      }
    }
  });
  // ...
 }
}

Таким же способом меняем Hide на View обратно.

БЛОГ НА HUSL

Как после выбора пункта в меню highcharts менять его название?

Ответы (2 шт):