2016-12-02 222 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的更多信息。