主页 / 问题 / 1420741
Accepted
Pashok
Asked:2022-08-16 13:37:08 +0000 UTC2022-08-16 13:37:08 +0000 UTC

在 highcharts 菜单中选择一个项目后如何更改其名称？

  • 772

有一些图形数据，在选择项目时有必要制作板的外观。但是标准函数不支持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>

javascript

2 个回答

  1. Best Answer

    有一种更新方法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。

    • 1

  2. 解决方案比我想象的要容易。this.text = "Hide data table";我应该改写

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

    什么解决了问题

    • 0

相关问题