Diagrammes de colonnes Google Étiquette de l'axe X différente de la valeur

Question

Je voudrais créer un graphique à colonnes avec les valeurs numériques de l'axe X 1, 2, 3, 4 ... N et Y bien sûr différentes sur chaque colonne. Je ne peux pas savoir comment changer les étiquettes sur la ligne X sous les barres, à la chaîne. Par exemple - 1 pourrait être marqué comme éléphant, 2 comme cheval, etc.

Je pourrais utiliser la chaîne comme valeurs X, mais alors il n'y a aucun moyen de faire fonctionner le zoom. Au moins, je n'ai trouvé aucun moyen de le faire fonctionner.

exemple simple avec des chaînes, je voudrais obtenir la même apparence que celle-ci, mais avec des valeurs numériques sur l'axe X.

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawBasic); 

function drawBasic() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'animal'); 
    data.addColumn('number', 'count'); 

    data.addRows([ 
    ['Elephant', 5], 
    ['Horse', 2], 
    ['Dog', 7], 
    ['Cat', 4], 
    ]); 

    var options = { 
    explorer: { 
     axis: 'horizontal', 
     keepInBounds: true, 
}, 

    title: 'Testing', 
    hAxis: { 
     title: 'Animal', 
    }, 
    vAxis: { 
     title: 'number' 
    } 
    }; 

    var chart = new google.visualization.ColumnChart(
    document.getElementById('chart_div')); 

    chart.draw(data, options); 
} 

graphique devrait ressembler à ceci, mais avec zoom travail: Chart example

Answer 1

d'utiliser des étiquettes de chaîne sur un axe continuous,
vous devrez fournir votre propre ticks

en utilisant la notation objet , entrez la valeur (v:) et la valeur formatée (f:)

{v: 1, f: 'Elephant'} 

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: drawBasic, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawBasic() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'animal'); 
 
    data.addColumn('number', 'count'); 
 
    data.addRows([ 
 
    [1, 5], 
 
    [2, 2], 
 
    [3, 7], 
 
    [4, 4] 
 
    ]); 
 

 
    var options = { 
 
    explorer: { 
 
     axis: 'horizontal' 
 
    }, 
 
    title: 'Testing', 
 
    hAxis: { 
 
     ticks: [ 
 
     {v: 1, f: 'Elephant'}, 
 
     {v: 2, f: 'Horse'}, 
 
     {v: 3, f: 'Dog'}, 
 
     {v: 4, f: 'Cat'} 
 
     ], 
 
     title: 'Animal', 
 
    }, 
 
    vAxis: { 
 
     title: 'number' 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.ColumnChart(
 
    document.getElementById('chart_div') 
 
); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>