2016-12-02 3 views
0

Есть ли способ использовать объект конфигурации Highcharts для создания пользовательской кнопки без использования функции экспорта?Highcharts создать пользовательскую кнопку в config

Метод ниже будет программно добавлять кнопку с последними строками кода (перед оператором 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.

Смежные вопросы