Горизонтальная панель Google Графика Переместить положение аннотации в центр диаграммы с накоплением - PullRequest
Новая
       49

Горизонтальная панель Google Графика Переместить положение аннотации в центр диаграммы с накоплением

2 голосов
/ 30 марта 2020

Я использую столбчатую диаграмму Google Chart. Диаграмма представляет собой диаграмму с накоплением столбцов с аннотациями для каждой точки данных столбца с накоплением. Аннотации находятся справа от панели, но я бы хотел, чтобы они были в центре панели.

Я смотрю эту страницу с начальным решением. Эта страница с функцией "moveAnnotations ()", но я не могу получить код для горизонтальной гистограммы.

Спасибо за вашу помощь, я заблудился. : (

 
/** Valeurs pour le graph bar 1 */
var data_graph_bar_1 = [
    ['Years', 'Beer & other', 'Water', 'CSD', 'Sensitive'],
    ['2014', 71, 56, 79, 59],
    ['2019', 70, 74, 75, 65]
];
 
        // Load the Visualization API and the corechart package.
        google.charts.load('current', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(function(){drawChart(data_graph_bar_1)});

        // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart(datas) {

            var data = google.visualization.arrayToDataTable(datas);
            var view = new google.visualization.DataView(data);

            view.setColumns([0,
                1, {
                calc: function (dt, row) {
                    return dt.getValue(row, 1);
                },
                type: "number",
                role: "annotation"
                },
                2, {
                calc: function (dt, row) {
                    return dt.getValue(row, 2);
                },
                type: "number",
                role: "annotation"
                },
                3, {
                calc: function (dt, row) {
                    return dt.getValue(row, 3);
                },
                type: "number",
                role: "annotation"
                },
                4, {
                calc: function (dt, row) {
                    return dt.getValue(row, 4);
                },
                type: "number",
                role: "annotation"
                },
                {
                calc: function (dt, row) {
                    return 0;
                },
                label: "Total",
                type: "number",
                },
                {
                calc: function (dt, row) {
                    return dt.getValue(row, 1) + dt.getValue(row, 2)+ dt.getValue(row, 3)+ dt.getValue(row, 4);
                },
                type: "number",
                role: "annotation"
                }
            ]);
            var options = {
                height: 130,
                colors: ['#B4CC00', '#3399FF', '#E64B00','#FF8B00'],
                legend: 'none',
                bar: { groupWidth: '75%' },
                isStacked: true,
                displayAnnotations: true,
                annotations: {
                    textStyle: {
                    // The color of the text.
                        color: '#000000',
                        fontSize: 15
                    },
                },
                hAxis: {
                    gridlines: {
                        count: 0
                    },
                    textPosition: 'none',
                    textStyle : {
                        fontSize: 15
                    }
                },
                vAxis: {
                    textStyle: {
                        bold: true,
                        fontSize: '20',
                    }
                },
                chartArea:{
                    left:50,
                },
            };
            
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
            chart.draw(view, options);
        }
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

1 Ответ

0 голосов
/ 30 марта 2020

вместо настройки атрибута 'y' метки,
нам просто нужно отрегулировать атрибут 'x' ...

Сначала нам нужно найти метку аннотации.
здесь мы l oop всех строк и столбцов, затем используем значение, чтобы найти метку.

мы исключаем метки черного цвета, потому что они отображаются во всплывающей подсказке,
мы не хотим их перемещать. 

  for (var r = 0; r < data.getNumberOfRows(); r++) {
    for (var c = 1; c < data.getNumberOfColumns(); c++) {
      var labels = chart.getContainer().getElementsByTagName('text');
      Array.prototype.forEach.call(labels, function(label, index) {
        if ((label.textContent === data.getValue(r, c).toFixed(0)) &&
            (label.getAttribute('fill') !== '#000000')) {
          barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
          xAdj = (barBounds.width / 2);
          label.setAttribute('x', barBounds.left + xAdj);
          label.setAttribute('text-anchor', 'middle');
        }
      });
    }
  }

см. Следующий рабочий фрагмент ... 

var data_graph_bar_1 = [
    ['Years', 'Beer & other', 'Water', 'CSD', 'Sensitive'],
    ['2014', 71, 56, 79, 59],
    ['2019', 70, 74, 75, 65]
];

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){drawChart(data_graph_bar_1)});

function drawChart(datas) {

    var data = google.visualization.arrayToDataTable(datas);
    var view = new google.visualization.DataView(data);

    view.setColumns([0,
        1, {
        calc: function (dt, row) {
            return dt.getValue(row, 1);
        },
        type: "number",
        role: "annotation"
        },
        2, {
        calc: function (dt, row) {
            return dt.getValue(row, 2);
        },
        type: "number",
        role: "annotation"
        },
        3, {
        calc: function (dt, row) {
            return dt.getValue(row, 3);
        },
        type: "number",
        role: "annotation"
        },
        4, {
        calc: function (dt, row) {
            return dt.getValue(row, 4);
        },
        type: "number",
        role: "annotation"
        },
        {
        calc: function (dt, row) {
            return 0;
        },
        label: "Total",
        type: "number",
        },
        {
        calc: function (dt, row) {
            return dt.getValue(row, 1) + dt.getValue(row, 2)+ dt.getValue(row, 3)+ dt.getValue(row, 4);
        },
        type: "number",
        role: "annotation"
        }
    ]);
    var options = {
        height: 130,
        colors: ['#B4CC00', '#3399FF', '#E64B00','#FF8B00'],
        legend: 'none',
        bar: { groupWidth: '75%' },
        isStacked: true,
        displayAnnotations: true,
        annotations: {
            textStyle: {
            // The color of the text.
                color: '#000000',
                fontSize: 15
            },
        },
        hAxis: {
            gridlines: {
                count: 0
            },
            textPosition: 'none',
            textStyle : {
                fontSize: 15
            }
        },
        vAxis: {
            textStyle: {
                bold: true,
                fontSize: '20',
            }
        },
        chartArea:{
            left:50,
        },
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      var observer = new MutationObserver(moveAnnotations);
      observer.observe(chart.getContainer(), {
        childList: true,
        subtree: true
      });
    });

    function moveAnnotations() {
      var chartLayout = chart.getChartLayoutInterface();
      var barBounds;
      var xAdj;

      for (var r = 0; r < data.getNumberOfRows(); r++) {
        for (var c = 1; c < data.getNumberOfColumns(); c++) {
          var labels = chart.getContainer().getElementsByTagName('text');
          Array.prototype.forEach.call(labels, function(label, index) {
            if ((label.textContent === data.getValue(r, c).toFixed(0)) && (label.getAttribute('fill') !== '#000000')) {
              barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
              xAdj = (barBounds.width / 2);
              label.setAttribute('x', barBounds.left + xAdj);
              label.setAttribute('text-anchor', 'middle');
            }
          });
        }
      }
    }

    chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

РЕДАКТИРОВАТЬ

, если существует более одной аннотации с одинаковым значением,
, тогда нам нужно добавить еще одно условие.

аналогично получению границ столбцов из интерфейса диаграммы,
мы можем получить границы аннотаций. 

labelBounds = chartLayout.getBoundingBox('annotationtext#' + (c - 1) + '#' + r + '#0');

и поскольку начальное выравнивание аннотации находится справа,
или text-anchor="end",
, это означает разницу между атрибутом 'x' элемента <text> и Свойство left границ будет равно ширине границ.
мы можем использовать это различие, чтобы убедиться, что у нас есть правильная аннотация перед перемещением. 

((parseFloat(label.getAttribute('x')) - labelBounds.left) === labelBounds.width)

см. Следующий рабочий фрагмент ... 

var data_graph_bar_1 = [
    ['Years', 'Beer & other', 'Water', 'CSD', 'Sensitive'],
    ['2014', 71, 56, 74, 59],
    ['2019', 70, 74, 75, 65]
];

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(function(){drawChart(data_graph_bar_1)});

function drawChart(datas) {

    var data = google.visualization.arrayToDataTable(datas);
    var view = new google.visualization.DataView(data);

    view.setColumns([0,
        1, {
        calc: function (dt, row) {
            return dt.getValue(row, 1);
        },
        type: "number",
        role: "annotation"
        },
        2, {
        calc: function (dt, row) {
            return dt.getValue(row, 2);
        },
        type: "number",
        role: "annotation"
        },
        3, {
        calc: function (dt, row) {
            return dt.getValue(row, 3);
        },
        type: "number",
        role: "annotation"
        },
        4, {
        calc: function (dt, row) {
            return dt.getValue(row, 4);
        },
        type: "number",
        role: "annotation"
        },
        {
        calc: function (dt, row) {
            return 0;
        },
        label: "Total",
        type: "number",
        },
        {
        calc: function (dt, row) {
            return dt.getValue(row, 1) + dt.getValue(row, 2)+ dt.getValue(row, 3)+ dt.getValue(row, 4);
        },
        type: "number",
        role: "annotation"
        }
    ]);
    var options = {
        height: 130,
        colors: ['#B4CC00', '#3399FF', '#E64B00','#FF8B00'],
        legend: 'none',
        bar: { groupWidth: '75%' },
        isStacked: true,
        displayAnnotations: true,
        annotations: {
            textStyle: {
            // The color of the text.
                color: '#000000',
                fontSize: 15
            },
        },
        hAxis: {
            gridlines: {
                count: 0
            },
            textPosition: 'none',
            textStyle : {
                fontSize: 15
            }
        },
        vAxis: {
            textStyle: {
                bold: true,
                fontSize: '20',
            }
        },
        chartArea:{
            left:50,
        },
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    google.visualization.events.addListener(chart, 'ready', function () {
      var observer = new MutationObserver(moveAnnotations);
      observer.observe(chart.getContainer(), {
        childList: true,
        subtree: true
      });
    });

    function moveAnnotations() {
      var chartLayout = chart.getChartLayoutInterface();
      var barBounds;
      var xAdj;

      for (var r = 0; r < data.getNumberOfRows(); r++) {
        for (var c = 1; c < data.getNumberOfColumns(); c++) {
          var labels = chart.getContainer().getElementsByTagName('text');
          Array.prototype.forEach.call(labels, function(label, index) {
            labelBounds = chartLayout.getBoundingBox('annotationtext#' + (c - 1) + '#' + r + '#0');
            barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
            if ((label.textContent === data.getValue(r, c).toFixed(0)) && (label.getAttribute('fill') !== '#000000') && ((parseFloat(label.getAttribute('x')) - labelBounds.left) === labelBounds.width)) {
              xAdj = (barBounds.width / 2);
              label.setAttribute('x', barBounds.left + xAdj);
              label.setAttribute('text-anchor', 'middle');
            }
          });
        }
      }
    }

    chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...