Как отобразить разделительную линию в меню экспорта Highcharts?

Question

Существует прямая линия под заголовком «Печать диаграммы» инструмента экспорта Highcharts. Я хотел бы создать один или два из них, чтобы отделить изображение от форматов данных, а также до добавления дополнительных ссылок.

Как я могу создать линию? Я попробовал это с DIV, но это не похоже на решение (слишком много настроек & tricking), ни <hr>. Так что лучший вариант?

Спасибо за любые подсказки!

Answer 1

Использование API Highcharts при определении меню вы можете просто добавить следующий код в качестве элемента в exporting.buttons.contextButton.menuItems массиве:

{ separator: true } 

Следующий код будет добавлен непосредственно в диаграмме (see it on JSFiddle):

exporting: { 
    buttons: { 
     contextButton: { 
      menuItems: [{ 
       textKey: 'printChart', 
       onclick: function() { 
        this.print(); 
       } 
      }, { 
       separator: true 
      }, { 
       textKey: 'downloadPNG', 
       onclick: function() { 
        this.exportChart(); 
       } 
      }, { 
       separator: true 
      }, { 
       textKey: 'downloadJPEG', 
       onclick: function() { 
        this.exportChart({ 
         type: 'image/jpeg' 
        }); 
       } 
      }, { 
       separator: true 
      }, { 
       textKey: 'downloadPDF', 
       onclick: function() { 
        this.exportChart({ 
         type: 'application/pdf' 
        }); 
       } 
      }, { 
       separator: true 
      }, { 
       textKey: 'downloadSVG', 
       onclick: function() { 
        this.exportChart({ 
         type: 'image/svg+xml' 
        }); 
       } 
      }] 
     } 
    } 
}