Cách xóa nút khỏi Highcharts

85

Tôi đang tạo biểu đồ bằng thư viện Highcharts và tôi tự hỏi làm cách nào để loại bỏ 2 nút nhỏ ở góc bên phải mà bạn có thể in và tải xuống biểu đồ và tôi muốn thêm một nút mới.

Có lẽ ai đó có thể giúp tôi?

javascript jquery highcharts

— tomzi
nguồn

1

Kiểm tra chúng qua firebug, nếu chúng có danh tính hoặc những thứ khác. sử dụng bộ chọn css và gọi phương thức .remove () trên chúng.

— mas-thiết kế

sử dụng firebug và tìm những id nút đặc biệt, và trong css của bạn, bạn có thể nói để hiển thị: none cho rằng id cụ thể hoặc lớp

— Manny

214

Hãy thử thêm vào việc exporting: { enabled: false }tạo biểu đồ của bạn.

— dgw
nguồn

Cảm ơn bạn rất nhiều, nó hoạt động: D. Có thể bạn sẽ biết làm thế nào tôi có thể thêm một cái mới?

— tomzi

Không, không thực sự tạo ra một cái mới. Nhưng có thể bạn có thể sửa đổi một trong các nút in / xuất. Tài liệu gợi ý theo hướng này highcharts.com/ref/#exporting-buttons ... đang chơi với onClick.

— dgw

3

exporting: falselà đủ

— Adi Azarya

13

Đánh dấu vào đây để tạo nút mới:

Ví dụ: http://jsfiddle.net/fXHB5/3496/

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

— Andre Sampaio
nguồn

Jsfiddle này không hoạt động nữa. "NetworkError: 404 Not Found - highcharts.com/js/testing-exporting.js "

— gps

9

Cách tốt nhất để thay thế biểu tượng hamburger là tắt nút điều hướng Tùy chọn, sau đó tạo menu của riêng bạn và tùy chỉnh từng ngữ cảnh như đã nêu trong tài liệu . Từ đây, bạn có thể sử dụng bất kỳ biểu tượng nào bạn muốn với menu thả xuống của riêng bạn.

Thao tác này sẽ tắt biểu tượng bánh hamburger.

navigation: {
buttonOptions: {
  enabled: false
  }
 }

Đây là cách bạn tùy chỉnh các tùy chọn xuất cho danh sách của riêng mình.

$('#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

— Christopher R.
nguồn

2

Cảm ơn bạn, điều này giúp sau 6 năm để ẩn biểu tượng bánh hamburger mà không cần vô hiệu hóa xuất khẩu;)

— b1919676

lưu ý rằng bản sửa lỗi này cũng loại bỏ lựa chọn thay đổi đối với các nhãn trục x (nếu có)

— danday74

Obrigado, thằng khốn nạn. nesse exelo ta foltando o "viewfullscrean" então pra quem estiver Preisando jsfiddle.net/BlackLabel/1ga2fqL0

— Paulo Victor

feliz bởi poder ajudar!

— Christopher R.

7

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

Bạn chỉ phải vô hiệu hóa contextButton.

— Ivan Ruski
nguồn

1

exporting:false,

Thêm mã trên để tắt tùy chọn xuất.

— Sasikumar
nguồn

0

@dgw có ý tưởng đúng đắn để xóa các nút xuất, nhưng tôi không hài lòng với đề xuất "và tôi muốn thêm một đề xuất mới" cho đến khi tôi nhận ra rằng mình chỉ nên tạo các nút bên ngoài biểu đồ . Trừ khi dữ liệu của bạn là tĩnh, bạn không thực sự biết liệu có chỗ để hiển thị các điều khiển của mình hay không.

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

— Dan Ross
nguồn

0

Tùy chọn khác là: bạn chỉ có thể loại bỏ nhập "node_modules / highcharts / modules / export.js" khỏi toàn bộ dự án nếu bạn không cần nó.

Đó là một giải pháp cho tôi!

— Renat Gatin
nguồn

0

Cách tốt nhất để làm điều này là cập nhật exporting.buttons.contextButton.menuItemsmảng để chỉ bao gồm các mục menu bạn muốn. Dưới đây là ví dụ loại trừ các tùy chọn "Biểu đồ in" và "Xem toàn màn hình".

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

Ví dụ về biểu đồ cao

— Debra Saunders
nguồn