Ярлыки на диаграммах Google не отображаются в определенной конфигурации - PullRequest
Новая
       22

Ярлыки на диаграммах Google не отображаются в определенной конфигурации

0 голосов
/ 16 ноября 2018

У меня есть диаграмма, настроенная как в рабочем jsfiddle.Я настроил ярлыки (на основе документации Google Doc: https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars) Но они не видны. Когда я меняю тип диаграммы на google.visualization.BarChart, тогда появляются ярлыки, но структура баров разрушается. Как добавить ярлыки вмоя конфигурация?

Реплицировано: https://jsfiddle.net/41fmq37j/

JS: 

google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        [{label: 'Year', id: 'year', type: 'number'},
        {label: 'Sales', id: 'Sales', type: 'number'},
        {label: 'Expenses', id: 'Expenses', type: 'number'},
  { role: 'annotation' }],
        [2014, 10, 400  ,'label1'],
        [2014, 800, 100 ,'label2'],
        [2015, 200, 460 ,'label3'],
        [2015, 110, 660 ,'label4'],
        [2016, 100, 300 ,'label5'],
        [2016, 600, 120 ,'label6'],
        [2017, 360, 540 ,'label7'],
        [2017, 300, 500 ,'label8']
    ]);

    var options = {
        chart: {
            title: 'Sales and Expenses',
            subtitle: 'Some descr',
        },
        bars: 'horizontal',
        height: 400,
        isStacked: true,
    };

var chart = new google.charts.Bar(document.getElementById('chart_div'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

HTML: 

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

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

Можно настроить yAxis, как показано ниже: потому что текущий формат может сбивать с толку. enter image description here

Я хотел бы создать больше, немного разных графиков, например, которые будут группировать столбцы поТаким образом, еще один вопрос: как мы можем заархивировать группу yAxis по строке? Может быть, нам следует создать какой-нибудь компаратор?

1 Ответ

0 голосов
/ 16 ноября 2018

материал диаграммы не поддерживают роли столбцов, такие как 'annotation',
вместе с , несколько других опций

, и невозможно иметьнесколько стеков на ярлык в классических диаграммах

, поэтому мы можем использовать диаграмму материал ,
и добавлять собственные аннотации вручную,
на'ready' событие диаграммы

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

google.charts.load('current', {
  packages:['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [
      {label: 'Year', id: 'year', type: 'number'},
      {label: 'Sales', id: 'Sales', type: 'number'},
      {label: 'Expenses', id: 'Expenses', type: 'number'},
      {role: 'annotation', type: 'string'}
    ],
    [2014, 10, 400, 'label1'],
    [2014, 800, 100, 'label2'],
    [2015, 200, 460, 'label3'],
    [2015, 110, 660, 'label4'],
    [2016, 100, 300, 'label5'],
    [2016, 600, 120, 'label6'],
    [2017, 360, 540, 'label7'],
    [2017, 300, 500, 'label8']
  ]);

  var options = {
    chart: {
      title: 'Sales and Expenses',
      subtitle: 'Some descr',
    },
    bars: 'horizontal',
    height: 400,
    isStacked: true,
    vAxis: {
      format: '0'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);

  // add annotations
  google.visualization.events.addListener(chart, 'ready', function () {
    var annotation;
    var bars;
    var copyLabel;
    var coordsBar;
    var coordsLabel;
    var labels;
    var svg;

    // get svg
    svg = container.getElementsByTagName('svg')[0];

    // find label to clone
    labels = svg.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.textContent === data.getValue(0, 0).toString()) {
        copyLabel = label;
      }
    });

    // find top bars, add labels
    bars = svg.getElementsByTagName('path');
    Array.prototype.forEach.call(bars, function(bar, index) {
      coordsBar = bar.getBBox();
      annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
      coordsLabel = annotation.getBBox();
      annotation.textContent = data.getValue(index, 3);
      annotation.setAttribute('fill', '#000000');
      annotation.setAttribute('x', coordsBar.x + coordsBar.width - 16);
      annotation.setAttribute('y', coordsBar.y + coordsBar.height - (coordsLabel.height / 2));
      annotation.style.zIndex = -1;
    });
  });

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

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

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

здесь обновлено ... 

// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
  // find first y-axis label
  if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
    annotation = label;
  }
});

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

google.charts.load('current', {
  packages:['bar']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    [
      {label: 'Date', id: 'string', type:'date'},
      {label: 'Sales', id: 'Sales', type: 'number'},
      {label: 'Expenses', id: 'Expenses', type: 'number'},
      {role: 'annotation', type: 'string'}
    ],
    [new Date('2011-12-20'), 10, 400, 'User1'],
    [new Date('2011-12-20'), 800, 100, 'User2'],
    [new Date('2011-12-21'), 200, 460, 'User3'],
    [new Date('2011-12-21'), 200, 460, 'User3'],
  ]);

  var dateFormat = 'YYYY/MM/dd';

  var options = {
    chart: {
      title: 'Sales and Expenses',
      subtitle: 'Some descr',
    },
    bars: 'horizontal',
    height: 400,
    isStacked: true,
    vAxis: {
    		format: dateFormat,

    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.charts.Bar(container);
  var formatDate = new google.visualization.DateFormat({
    pattern: dateFormat
  });

  // add annotations
  google.visualization.events.addListener(chart, 'ready', function () {
    var annotation;
    var bars;
    var copyLabel;
    var coordsBar;
    var coordsLabel;
    var labels;
    var svg;

    // get svg
    svg = container.getElementsByTagName('svg')[0];

    // find label to clone
    labels = svg.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      // find first y-axis label
      if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
        copyLabel = label;
      }
    });

    // find top bars, add labels
    bars = svg.getElementsByTagName('path');
    Array.prototype.forEach.call(bars, function(bar, index) {
      coordsBar = bar.getBBox();
      annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
      coordsLabel = annotation.getBBox();
      annotation.textContent = data.getValue(index, 3);
      annotation.setAttribute('fill', '#ffffff');
      annotation.setAttribute('text-anchor', 'start');
      annotation.setAttribute('x', coordsBar.x + coordsBar.width);
      annotation.setAttribute('y', coordsBar.y + (coordsBar.height / 2) + (coordsLabel.height / 2));
      annotation.style.zIndex = -1;
    });
  });

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