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

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