Question

我正在从事高等教育。在上图中，我必须在右上角添加关闭按钮以关闭菜单项。我尝试添加关闭按钮类但不起作用。

以下是更改，

navigation: {
        menuStyle: {
        border: '0px',
        background: '#727272',
        padding: '5px 56px 0px 1px',
        width: '100%'
        },
        menuItemHoverStyle: {
        background: null
        },
        menuItemStyle: {
        fontWeight: 'normal',
        background: null,
        fontSize: '13px',
        color: '#FFFFFF'
        },
}

以下是我的自定义菜单按钮，

settingButton: {
                 symbol: 'url(' + baseUrl + '/admin/customMenu.png)',
                 symbolStrokeWidth: 0,
                 _titleKey: 'settingkey',
                 symbolFill: '#fffff',
                 symbolX: 20,
                 symbolY: 20,
                 y: -8,
                 symbolStroke: '#330033',
                 **menuItems: buttons,**
                 theme: {
                           states: {
                                hover: {
                                    fill: '#ffffff',
                                    stroke: '#ffffff'
                                  }
                             },
                  style: {
                            cursor:'cursor',
                            fontFamily:'Oswald'
                           }
                     }
                },

和menuitem是，

buttons.push({
                    text: "Topper one",
                    onclick: topperOne
                }, {
                    text: "Topper ",
                    onclick: TopperTwo
                });

我尝试将类和Id属性添加到按钮，但这是添加到设置按钮而不是菜单项。

主题：{ class：＆＃34; myButton highcharts-button highcharts-button-normal＆＃34;， id：＆＃34; myDiamondButton＆＃34; }

Answer 1

您可以为导出菜单添加自定义菜单项定义。请参阅exporting.menuItemDefitions。

在文本道具中，您可以定义一个html元素，然后单击，您可以设置所需的行为。

function hideHighlight(id) {
  window.event.stopPropagation()
  const chart = Highcharts.charts.find(chart => chart.options.chart.id === id)

  if (chart) {
    const printItem = chart.exportDivElements[0]

    if (printItem) {
      printItem.onmouseout()
    }
  }
}

Highcharts.chart('container', {
  chart: {
    id: 'c1'
  },
  series: [],
  exporting: {
    menuItemDefinitions: {
      printChart: {
        onclick: function(e) {
          if (e.target.tagName === 'SPAN') {
            return false
          }

          this.print()
        },
        text: 'Print chart<span style="float: right" onmouseover="hideHighlight(\'c1\')">X</span>'
      }
    }
  }
});

直播示例：https://jsfiddle.net/72ubvypo/

highcharts如何在右上角添加关闭按钮进入上下文菜单

1 个答案: