2016-12-02 5 views
0

ハイチャートの設定オブジェクトを利用して、エクスポート機能を使用せずにカスタムボタンを作成する方法はありますか?ハイチャートは設定でカスタムボタンを作成します

以下のメソッドは、プログラムの最後の数行のコードを(return文の前に)追加しますが、設定でこれを処理したいだけです。

var options = { 
      chart: { 
       renderTo: container, 
       zoomType: 'x', 
       spacingBottom: 20, 
       type: 'column' 
      }, 
      legend: { 
       layout: 'vertical', 
       verticalAlign: 'top', 
       align: 'right' 
      }, 
      tooltip: { 
       shared: true, 
       crosshairs: true, 
       xDateFormat: '%b %e, %l:%M %p' 
      }, 
      series: [ 
       { 
        "name": "Excellent", 
        "color": config.color.excellent, 
        "data": dataE, 
        "pointWidth": pointWidth ? pointWidth : undefined 
       }, 
       { 
        "name": "Fair", 
        "color": config.color.fair, 
        "data": dataF, 
        "pointWidth": pointWidth ? pointWidth : undefined 
       }, 
       { 
        "name": "Poor", 
        "color": config.color.poor, 
        "data": dataP, 
        "pointWidth": pointWidth ? pointWidth : undefined 
       } 
      ], 
      exporting: { 
       enabled: false 
      } 
     } 

     // Adds new button below 
     var chart = new Highcharts.Chart(options); 
     var custombutton = chart.renderer.button('button', 74, 10, function(){ 
      alert('New Button Pressed'); 
     },null,null,null).add(); 
     return chart; 

答えて

1

それは、エクスポートモジュールなしでは不可能ですが、そのモジュールを使用してエクスポートする機能と共通して何もないだろう、独自の税関ボタンを定義することができます。

exporting: { 
     buttons: [{ 
      text: 'custom button', 
      onclick: function() { 
      alert('clicked'); 
      }, 
      theme: { 
       'stroke-width': 1, 
       stroke: 'silver', 
       r: 0, 
       states: { 
        hover: { 
         fill: '#a4edba' 
        }, 
        select: { 
         stroke: '#039', 
         fill: '#a4edba' 
        } 
       } 
      } 
     }] 
    } 

例:http://jsfiddle.net/upt4cbqj/

また、あなたは、エクスポートモジュールなしオプションのボタンを定義することができます新しい設定オプションでHighchartsを拡張することができます。 Highchartsの拡張に関する詳細情報here

関連する問題