Highcharts에서 버튼을 제거하는 방법


85

저는 Highcharts 라이브러리로 차트를 만들고 있는데 오른쪽 모서리에있는 2 개의 작은 버튼을 제거하는 방법이 궁금합니다.이 버튼은 그래프를 인쇄하고 다운로드 할 수 있으며 새 버튼을 추가하고 싶습니다.

누군가 나를 도울 수 있습니까?


1
신원이나 다른 것이 있으면 방화범을 통해 검사하십시오. CSS 선택자를 사용하고 .remove () 메서드를 호출하십시오.
mas-designs

방화범을 사용하고 특정 버튼 ID를 찾으면 CSS에서 특정 ID 또는 클래스에 대해 display : none이라고 말할 수 있습니다
manny

답변:


214

exporting: { enabled: false }차트 생성에 추가해보십시오 .


고마워요, 작동합니다 : D. 새 것을 어떻게 추가 할 수 있는지 아시겠습니까?
tomzi

아니요, 실제로 새로 만드는 것은 아닙니다. 그러나 인쇄 / 내보내기 버튼 중 하나를 수정할 수 있습니다. 이 방향의 문서 힌트 highcharts.com/ref/#exporting-buttons은 ...와 함께 연주 onClick.
dgw

3
exporting: false충분합니다
Adi Azarya


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를

이 수정은 x 축 레이블 (있는 경우)에 대한 변경 선택도 제거합니다.
danday74

Obrigado, ajudou bastante. nesse exemplo ta foltando o "viewfullscrean"então pra quem estiver precisando jsfiddle.net/BlackLabel/1ga2fqL0
Paulo Victor

feliz 의해 poder ajudar!
Christopher R.

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 예

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.