Déplacement de la position des annotations des colonnes de Google Chart

Question

J'utilise le code ci-dessous pour produire un graphique en colonnes avec les chiffres à l'intérieur des colonnes, mais j'aimerais vraiment qu'ils soient positionnés en bas des barres et non en haut.

Voici un visuel du tableau que j'ai :

    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 80, 15]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2,
        {
            calc: "stringify",
            sourceColumn: 2,
            type: "string",
            role: "annotation"
        }]);

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

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

    chart.draw(view, options);

Toute aide est la bienvenue.

Answer 1

Il n'y a pas de norme les options de configuration pour déplacer les annotations vers le bas

vous pouvez régler annotations.stem.length pour régler à partir de la position par défaut

mais cela va déplacer toutes les annotations à la même distance,

ce qui ne fonctionnerait pas ici

---

vous pouvez déplacer manuellement les annotations, comme dans le snippet suivant...

Cependant, les modifications personnalisées ne seront pas prises en compte lors de l'utilisation de l'option getImageURI ,
si vous avez besoin de produire une image png du graphique

également, le graphique ramènera les annotations à leur emplacement d'origine,
à chaque fois qu'il y a de l'interactivité, comme le survol d'une colonne

doit donc utiliser un MutationObserver pour les déplacer en arrière, quand l'activité se produit...

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Completed', 'Outstanding'],
        ['Item 1', 75, 25],
        ['Item 2', 50, 40],
        ['Item 3', 80, 15]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,
        {
            calc: "stringify",
            sourceColumn: 1,
            type: "string",
            role: "annotation"
        },
        2,
        {
            calc: "stringify",
            sourceColumn: 2,
            type: "string",
            role: "annotation"
        }]);

    var options = {
        legend: 'none',
        height: 270,
        chartArea: { 'width': '80%', 'height': '80%' },
        bar: { groupWidth: '80%' },
        vAxis: {
            textPosition: 'none',
            gridlines: {
                color: 'transparent'
            }
        },
      series: {
          0: { color: '#00A887' },
          1: { color: '#F6323E' },
        }

    };

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

    // move annotations
    var observer = new MutationObserver(function () {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(annotation) {
        if ((annotation.getAttribute('text-anchor') === 'middle') &&
            (annotation.getAttribute('fill') === '#ffffff')) {
          var chartLayout = chart.getChartLayoutInterface();
          annotation.setAttribute('y',
            chartLayout.getYLocation(0) - (parseInt(annotation.getAttribute('font-size')) / 2)
          );
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    chart.draw(view, options);
}

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