web-dev-qa-db-fra.com

comment masquer les valeurs de données de l'axe des abscisses x

Je dessine un graphique à barres en utilisant highchart.js

Je ne veux pas afficher les valeurs des données de l'axe x.

Quelqu'un peut-il me dire de quelle option s'agit-il?
config complète:

var chart = new Highcharts.Chart({
                chart: {
                    renderTo: container,
                    defaultSeriesType: 'bar'
                },
                title: {
                    text: null
                },
                subtitle: {
                    text: null
                },
                xAxis: {
                    categories: [''],
                    title: {
                        text: null
                    },
                    labels: {enabled:true,y : 20, rotation: -45, align: 'right' }

                },
                yAxis: {
                    min: 0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        align: 'high'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        },
                        pointWidth: 35,
                        color: '#D9CDC1'
                    }
                },
                legend: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                series: [{
                    name: 'Year 1800',
                    data: [107]
                }]
            });
javascriptjquerychartshighchartsbar-chart
47
Nurul Asad

Dans HighCharts, les graphiques à barres utilisent des axes inversés, donc l'axe inférieur est vraiment l'axe Y. (Voir également les graphiques "à colonnes" dans lesquels le graphique pivote de 90 degrés, auquel cas l'axe inférieur est l'axe X.)

Vous devez ajouter ce qui suit à la configuration yAxis

labels:
{
  enabled: false
}

Voir l'exemple suivant pour un exemple complet: http://jsfiddle.net/k5yBj/433/

83
Nick

Pour masquer les étiquettes sur l'axe X, définissez l'option labels: {enabled:false} comme ça:

    .....
    ........
    ,
                    xAxis: {
                        categories: [''],
                        title: {
                            text: null
                        },
                        labels: {
                         enabled:false,//default is true
                         y : 20, rotation: -45, align: 'right' }

                    }


.....
....

Pour masquer les étiquettes sur l'axe des y, définissez l'option labels: {enabled:false} comme ça:

.....
.......
,
                yAxis: {
                    min: 0,
                    gridLineWidth: 0,
                    title: {
                        text: '',
                        align: 'high'
                    },
                    labels:{
                        enabled:false//default is true
                    }
                },
.........
......

Reportez-vous à la documentation pour une meilleure compréhension.

20
Rahul Gupta

La réponse populaire ci-dessus masque uniquement les étiquettes, cette coche gauche pour moi que j'ai également souhaité supprimer.

Dans ce cas, cela fonctionne bien

    xAxis: {
            visible: false
        },

Il s'agit d'une solution simple pour tout supprimer sur l'axe x/y pour toute personne intéressée. Pour plus d'informations, veuillez consulter ici https://api.highcharts.com/highcharts/xAxis.visible

3
RS3

Si vous cachez x données, regardez ceci https://jsfiddle.net/anrilafosel/3g4z5kc3/

chart.xAxis[0].setCategories(newCategories);
for (i = 0; i < chart.series.length; i++) {
  var newData = [];
  for (j = 0; j < toggler_hc13.length; j++)
    if (toggler_hc13[j] === 1)
      newData.Push(series_hc13[i].data[j]);
  chart.series[i].setData(newData);
}
0
23 45