ハイチャートのメニュー項目機能を動的に呼び出す方法は？

Question

私はアプリケーションでユーザビリティの問題を解決しようとしています。つまり、ユーザーはコンテキストメニューに自分ができることが分かっていないようです（「私はXできますか？」）。チャートのすぐ上に表示されるボタンを追加しました（これは、ローカリゼーションを行う時間が来たときに対処しやすくなります）。

ので、代わりのこの（ハンバーガーをクリックした後）：

彼らはこれを取得：

highchartsは、メニューアイテムの機能自体のほとんどを行いますので、私は「ドンホイールを再開発してすべてを書き直したい。私の最初の考えは、メニューアイテムをクリックし、バーガーメニューを隠す（または、クリックが呼び出すものを潜在的に呼び出す）ため、見えないクリックのようなものでした。しかし、Chromeの要素を調べると利用可能ですが、.highcharts-menuや.highcharts-menu-item要素に動的にアクセスすることはできません（jQueryとネイティブの両方を試しました）。

私はチャートのロードイベント内で作業していますが、すべてのプロットラインが描画されるように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:{ 
 
    \t buttons:{ 
 
     \t contextButton: { 
 
     \t 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({ 
 
\t \t \t \t \t type: 'image/jpeg' 
 
\t \t \t \t }) ;}; 
 
function exportPdfChart() { instance.exportChart({ 
 
\t \t \t \t \t type: 'application/pdf' 
 
\t \t \t \t }) ;}; 
 
function exportSvgChart() { instance.exportChart({ 
 
\t \t \t \t \t type: 'image/svg+xml' 
 
\t \t \t \t }) ;};

#container { 
 
\t min-width: 310px; 
 
\t max-width: 800px; 
 
\t height: 400px; 
 
\t 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>