如何动态调用highcharts菜单项功能？

Question

我试图在我的应用程序中解决可用性问题，即用户似乎永远不知道上下文菜单中有他们可以做的事情（导致支持问题＆＃39;我可以做X？＆ ＃39）。我已经在图表上方添加了更明显的按钮（当进行本地化时，这也更容易处理）。

所以不要这样（点击汉堡后）：

他们得到了这个：

由于highcharts本身就完成了大部分menuItem功能，所以我不想重新发明轮子并重写所有内容。我的第一个想法是只需单击菜单项并隐藏汉堡菜单（或可能调用点击调用的内容），因此它是一种不可见的点击。但是，我似乎无法动态访问.highcharts-menu或.highcharts-menu-item元素（已尝试使用jQuery和native），即使我在Chrome中检查元素时它也可用。

我在图表的加载事件中工作，并尝试了10秒的延迟（以便绘制所有绘图线，但负载应该足够;它应该被称为绘制图表，但是绘图线会在之后渲染，它们不应该影响上下文菜单。）

如何访问它，或者它是否故意以某种方式隐藏起来？

这是一个非常简化的版本，没有延迟：

Highcharts.theme = {
    chart: {
        events: {
          load: function () {      
              var contextMenu = $('.highcharts-menu');
              console.log(contextMenu);
              //reports nothing
          }
        }
     }
}

Answer 1

通过在图表选项中添加以下内容来禁用导出菜单：

exporting:{
    buttons:{
        contextButton: {
            enabled: false
        }
    }
},

将图表实例分配给变量：

var instance = Highcharts.chart('container', {...

通过实例变量调用导出操作，例如：

instance.print();

工作代码：

var instance = Highcharts.chart('container', {

    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },

    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    exporting:{
    	buttons:{
      	contextButton: {
        	enabled: false
        }
      }
    },
    series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

function printChart() { instance.print() ;};
function exportPngChart() { instance.exportChart() ;};
function exportJpegChart() { instance.exportChart({
					type: 'image/jpeg'
				}) ;};
function exportPdfChart() { instance.exportChart({
					type: 'application/pdf'
				}) ;};
function exportSvgChart() { instance.exportChart({
					type: 'image/svg+xml'
				}) ;};

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<button onclick="printChart()">print</button>
<button onclick="exportPngChart()">export png</button>
<button onclick="exportJpegChart()">export jpeg</button>
<button onclick="exportPdfChart()">export pdf</button>
<button onclick="exportSvgChart()">export svg</button>
<div id="container"></div>