2016-12-02 427 views
0

有沒有辦法來利用Highcharts的配置對象來創建自定義按鈕W/O使用導出功能?Highcharts創建配置自定義按鈕

的方法,下面將編程添加按鈕W /代碼的最後幾行(return語句之前),但是我想簡單地照顧這在config。

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的更多信息。