Google Chart, comment déplacer une annotation sur le sommet des colonnes

J'ai eu le même problème, certains de mes séries a 0 comme ma dernière valeur, de sorte que l'étiquette doit indiquer sur l'Axe des X au lieu d'en haut. Avec dynamique de données, il serait un véritable défi pour s'assurer que la dernière valeur n'a jamais été 0. @dlaliberte m'a donné une astuce par où commencer avec ce commentaire:

"Comme une solution de contournement, vous pouvez envisager d'utiliser un ComboChart avec un supplément
série de tracer un point en haut de chaque colonne de la pile. Vous aurez à
calculer le total de l'autre série, vous-même pour savoir où mettre
chaque point."

J'ai trouvé un combo graphique de google galerie et ouvert jsfiddle pour voir ce que je pouvais faire. J'ai quitté les données pour la plupart, mais il a changé le nom de la série d'étiquettes et de fait le nombre un peu plus simple. Ne pas se laisser prendre sur le but de tracer le graphique des données est peu importe, je voulais juste comprendre comment obtenir mon annotation en haut du graphique, même lorsque la dernière colonne est 0 (https://jsfiddle.net/L5wc8rcp/1/):

function drawVisualization() {
    //Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line'}},
    };

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

Qui a produit ce graphique, qui est un excellent point de départ:

Comme vous pouvez le voir depuis la série 5 (Total des autres de la série) est un type: 'line', de sorte qu'il pointe toujours vers le haut de la pile. Maintenant, je n'ai pas nécessairement envie de la ligne dans mon tableau, car il n'a pas été utilisé pour comparer horizontal continu totaux, donc j'ai mis à jour la série 5 avec lineWidth: 0, puis a fait le titre de cette catégorie ", de sorte qu'il ne soit pas inclus dans la légende comme une pile (https://jsfiddle.net/Lpgty7rq/):

function drawVisualization() {
    //Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
        ['Application', 5, 2, 2, 8, 0, 17, 17],
        ['Friend', 4, 3, 5, 6, 2, 20, 20],
        ['Newspaper', 6, 1, 0, 2, 0, 9, 9],
        ['Radio', 8, 0, 8, 1, 1, 18, 18],
        ['No Referral', 2, 2, 3, 0, 6, 13, 13]
    ]);

    var options = {
        isStacked: true,
        title : 'Monthly Coffee Production by Country',
        vAxis: {title: 'Cups'},
        hAxis: {title: 'Month'},
        seriesType: 'bars',
        series: {5: {type: 'line', lineWidth: 0}}, 
    };

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

Et Le Tour Est Joué!

OriginalL'auteur Furbeenator

Utilisation alwaysOutside: true.

annotations: {
     textStyle: {
         color: 'black',
         fontSize: 11,
     },
     alwaysOutside: true
}

OriginalL'auteur Taisbevalle