Як видалити кнопку з Highcharts

85

Я створюю діаграми за допомогою бібліотеки Highcharts, і мені цікаво, як видалити 2 маленькі кнопки в правому куті, яку можна надрукувати та завантажити графіки, і я хотів би додати нову.

Може хтось міг мені допомогти?

javascript highcharts

— tomzi
джерело

1

Перевірте їх через пожежну помилку, якщо вони мають особисті дані чи інші речі. використовуйте селектори css і викликайте на них метод .remove ().

— mas-designs

використовуйте firebug і знайдіть ці конкретні ідентифікатори кнопок, і у своєму css ви можете сказати відображати: немає для цього конкретного ідентифікатора або класу

— manny

214

Спробуйте додати exporting: { enabled: false }до генерації діаграм.

— dgw
джерело

Велике спасибі, це працює: D. Можливо, ви знаєте, як я можу додати новий?

— tomzi

Ні, насправді не створюючи нового. Але, можливо, ви можете змінити одну з кнопок друку / експорту. Документація натякає в цьому напрямку highcharts.com/ref/#exporting-buttons ... гра з onClick.

— dgw

3

exporting: falseдостатньо

— Аді Азаря

13

Позначте це, щоб створити нову кнопку:

Приклад: http://jsfiddle.net/fXHB5/3496/

exporting: {
    buttons: [
        {
            symbol: 'diamond',
            x: -62,
            symbolFill: '#B5C9DF',
            hoverSymbolFill: '#779ABF',
            _titleKey: 'printButtonTitle',
            onclick: function() {
                alert('click!')
            }
        }
    ]
}

— Андре Сампайо
джерело

Цей jsfiddle більше не працює. "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "

— gps

9

Найкращий спосіб замінити піктограму гамбургера - це вимкнути опції навігаційної кнопки, а потім створити власне меню та налаштувати контекст по одному, як зазначено в документації . Звідси ви можете використовувати будь-яку потрібну піктограму у своєму власному випадаючому меню.

Це відключає значок гамбургера.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

Ось як ви налаштовуєте параметри експорту для власного списку.

$('#print').click(function() {
chart.print();
});
$('#pdf').click(function() {
chart.exportChart({
  type: 'application/pdf',
  filename: 'my-pdf'
 });
});
$('#png').click(function() {
chart.exportChart({
  type: 'image/png',
  filename: 'my-png'
 });
});
$('#jpeg').click(function() {
chart.exportChart({
  type: 'image/jpeg',
  filename: 'my-jpeg'
 });
});
$('#svg').click(function() {
chart.exportChart({
  type: 'image/svg+xml',
  filename: 'my-svg'
 });
});

jsfiddle

— Крістофер Р.
джерело

2

Дякую, приятелю, це допомогло через 6 років сховати піктограму гамбургера, не відключаючи експортування;)

— b1919676

зауважте, це виправлення також усуває вибір змін для міток осей х (якщо такі є)

— danday74,

Обрігадо, аджуду бастанте. ще не було прикладу до "viewfullscrean", що міститься у попередньому перекладі jsfiddle.net/BlackLabel/1ga2fqL0

— Пауло Віктор

feliz por poder ajudar!

— Крістофер Р.

7

exporting: {
    buttons: {
        contextButton: {
            enabled: false
        }
    }
}

Вам потрібно відключити лише contextButton.

— Іван Руський
джерело

1

exporting:false,

Додайте наведений вище код, щоб вимкнути опцію експорту.

— Сасікумар
джерело

0

@dgw має правильну ідею видалити кнопки експорту, але я не був задоволений пропозиціями "і я хотів би додати нову", поки не зрозумів, що я повинен просто зробити кнопки поза графіком . Якщо ваші дані не статичні, ви насправді не знаєте, чи є місце для відображення елементів керування.

<div id="container" style="height: 400px; min-width: 600px"></div>
<button id="button" class="autocompare">new button</button>

— Ден Росс
джерело

0

Інший варіант: ви можете просто видалити імпорт "node_modules / highcharts / modules / exporting.js" із цілого проекту, якщо він вам взагалі не потрібен.

Це було рішення для мене!

— Ренат Гатін
джерело

0

Найкращий спосіб зробити це - оновити exporting.buttons.contextButton.menuItemsмасив, щоб включити лише ті пункти меню, які ви хочете. Нижче наведено приклад, який виключає опції "Друк діаграми" та "Перегляд на весь екран".

exporting: {
    buttons: {
        contextButton: {
            menuItems: ["downloadPNG", "downloadJPEG", "downloadPDF", "downloadSVG"]
        }
    }
}

Приклад Highcharts

— Дебра Сондерс
джерело