축 및 격자 선 숨기기

80

내 Highcharts 차트의 축과 격자 선을 완전히 숨기려고합니다. 지금까지 선의 너비를 0으로 설정하려고했지만 작동하지 않았습니다.

xAxis: {
  lineWidth: 0,
  minorGridLineWidth: 0,
  lineColor: 'transparent'
}

축선 / 틱 및 격자 선을 전역 적으로 비활성화하여 "일반"플롯을 만들 수 있습니까?

charts highcharts

— 알렉스
소스

2

여기 y 축을 숨기는 방법

— 댄 Dascalescu

150

그냥 추가

xAxis: {
   ...  
   lineWidth: 0,
   minorGridLineWidth: 0,
   lineColor: 'transparent',
   ...          
   labels: {
       enabled: false
   },
   minorTickLength: 0,
   tickLength: 0
}

xAxis 정의에.

버전 4.1.9부터 간단히 axis 속성을 사용할 수 있습니다 visible.

xAxis: {
    visible: false,
}

— dgw
소스

@dgw 이렇게하면 x 축이 투명 해지지 만 여전히 데이터 아래의 물리적 공간을 차지합니다. 높이를 0으로 지정하는 방법이 있습니까?

— Trevor Burnham 2013

19

그것은 약간 과잉입니다. HighCharts는 축 표시 여부를 전환하는 "visible"이라는 간단한 속성을 구현해야합니다. 기능 요청 으로 게시 했으며 여기에서 투표 할 수 있습니다 .

— Dan Dascalescu 2013

2

minorGridLineWidth내가 찾고 있던 모호한 재산이었다. 감사!

— jetcom 2014-06-12

1

@TrevorBurnham-눈금이있는 물리적 공간을 제거하려면 chart.spacing = [0, 0, 0, 0]을 설정해야합니다 (또는 원하지 않는 경우 chart.spacingLeft와 같은 축을 0으로 설정하기 만하면됩니다). 모든 간격을 없애기 위해). 이 질문에 대한 제게 빠진 부분이었습니다.

— Matthew Dean

1

tickLength: 0내 꺾은 선형 차트에서 눈금을 숨기는 데 필요한 모든 것 같았습니다.

— Hartley Brody

74

를 들어 yAxis당신은 또한이 필요합니다 :

gridLineColor: 'transparent',

— 잭 모리스
소스

1

당신은 또한 설정해야합니까 title.text에 null? 어쨌든 HighCharts는 축 표시 여부를 전환하는 "visible"이라는 간단한 속성을 구현해야합니다. 기능 요청 으로 게시 했으며 여기에서 투표 할 수 있습니다 .

— Dan Dascalescu 2013

로 설정 gridLineColor하면 transparent제거 할 다른 축이있는 경우 그리드 선이 조기에 제거 될 수 있습니다. 이 예를 참조하십시오 .

— Dan Dascalescu

28

v4.9의 Highcharts보다 큰 버전이 visible: false있는 경우 xAxis및 yAxis설정 에서 사용할 수 있습니다 .

예:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

    title: {
        text: 'Highcharts axis visibility'
    },

    xAxis: {
        visible: false
    },

    yAxis: {
        title: {
            text: 'Fruit'
        },
        visible: false
    }

});

— onetwo12
소스

6

이것은 최선의 답변입니다

— micapam

21

yAxis의 격자 선을 다음과 같이 숨길 수도 있습니다.

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}

— Shweta Bhagwat
소스

5

나는 단지 내 것을 끌 수 있었다

       lineColor: 'transparent',
       tickLength: 0

— 벤
소스

2

구성 객체를 건드리지 않으려면 CSS로 그리드를 숨 깁니다.

.chart-container .highcharts-grid {
   display: none;
}

— 이란 레예스
소스

0

이것은 항상 나를 위해 잘 작동했습니다.

yAxes: [{
         ticks: {
                 display: false;
                },

— 0365 크리스
소스