Ukryj Highcharts osi i linii siatki

80

Próbuję całkowicie ukryć oś i linie siatki mojego wykresu Highcharts. Do tej pory próbowałem ustawić szerokość linii na 0, ale nie wyszło.

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

Czy można po prostu globalnie wyłączyć linie osi / znaczniki i linie siatki, aby utworzyć „zwykły” wykres?

charts highcharts Alex
źródło
2
Oto jak ukryć
yAxis

Odpowiedzi:

150

Poprostu dodaj

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

do definicji xAxis.

Od wersji 4.1.9 możesz po prostu użyć atrybutu osi visible:

xAxis: {
    visible: false,
}
dgw
źródło
@dgw Dzięki temu oś X jest przezroczysta, ale nadal zajmuje fizyczną przestrzeń pod danymi. Czy istnieje sposób, aby nadać mu również 0 wysokości?
Trevor Burnham
19
To trochę przesada. HighCharts powinien implementować prostą właściwość o nazwie „visible”, która przełączałaby, czy oś jest wyświetlana, czy nie. Wysłałem to jako propozycję funkcji i możesz na nią głosować tutaj .
Dan Dascalescu
2
minorGridLineWidthbyła mało znaną własnością, której szukałem. Dzięki!
jetcom
1
@TrevorBurnham - Aby usunąć fizyczną przestrzeń, która miała znaczniki, musisz ustawić chart.spacing = [0, 0, 0, 0] (lub po prostu ustawić dowolną oś, np. Chart.spacingLeft, na zero, jeśli nie chcesz aby wyeliminować wszelkie odstępy). To był brakujący element dla mnie na to pytanie.
Matthew Dean,
1
tickLength: 0wydawało mi się, że to wszystko, czego potrzebowałem, aby ukryć znaczniki na moim wykresie liniowym.
Hartley Brody
74

Do tego yAxisbędziesz potrzebować:

gridLineColor: 'transparent',

Zac Morris
źródło
1
Czy musisz też ustawić title.textto null? W każdym razie HighCharts powinien po prostu zaimplementować prostą właściwość o nazwie „visible”, która przełączałaby, czy oś jest wyświetlana, czy nie. Wysłałem to jako propozycję funkcji i możesz na nią głosować tutaj .
Dan Dascalescu
ustawienie gridLineColorna transparentmoże spowodować przedwczesne usunięcie linii siatki, jeśli nadal masz inne osie do usunięcia. Zobacz ten przykład .
Dan Dascalescu
28

Jeśli masz wyższą wersję Highcharts niż v4.9, możesz użyć visible: falsew ustawieniach xAxisi yAxis.

Przykład:

$('#container').highcharts({

    chart: {
        type: 'column'
    },

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

    xAxis: {
        visible: false
    },

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

});
onetwo12
źródło
6
To jest najlepsza odpowiedź
micapam
21

możesz także ukryć linię siatki na yAxis jako: 

yAxis:{ 
  gridLineWidth: 0,
  minorGridLineWidth: 0
}
Shweta Bhagwat
źródło
5

udało mi się wyłączyć mój tylko

       lineColor: 'transparent',
       tickLength: 0
Ben
źródło
2

Jeśli nie chcesz dotykać obiektu konfiguracyjnego, po prostu ukryj siatkę za pomocą css:

.chart-container .highcharts-grid {
   display: none;
}
Iran Reyes
źródło
0

To zawsze działało dobrze dla mnie:

yAxes: [{
         ticks: {
                 display: false;
                },
0365Chris
źródło