Как убрать кнопку с Highcharts

85

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

Может кто мне поможет?

javascript highcharts

— Томзи
источник

1

Осмотрите их с помощью firebug, если у них есть личности или другие вещи. используйте селекторы css и вызовите для них метод .remove ().

— mas-designs

используйте firebug и найдите те конкретные идентификаторы кнопок, и в своем CSS вы можете сказать, чтобы отображать: none для этого конкретного идентификатора или класса

— Мэнни

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 03

обратите внимание, что это исправление также удаляет выбор изменений для меток оси x (если есть)

— danday74 01

Обригадо, адзюдо бастанте. nesse excemplo ta foltando o "viewfullscrean" Então pra quem estiver precision 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

— Дебра Сондерс
источник