Как я могу извлечь ширину записи строки Google Chart - PullRequest
Новая
       7

Как я могу извлечь ширину записи строки Google Chart

1 голос
/ 14 января 2020

У меня возникают трудности с выделением ширины выбранной строки на диаграмме Ганта. Для дальнейшего уточнения мне нужна ширина строки данных в единственном числе, которую я вижу в коде под тегом 'rect', но не уверен, как правильно вызвать синтаксис для поиска ширины.

диаграмма Гантта

1 Ответ

1 голос
/ 14 января 2020

сначала дождитесь события 'ready' на графике.

тогда мы можем получить элементы <rect> из диаграммы.
будут другие элементы <rect>, кроме тех, которые представляют строку.

, например, область диаграммы и т. Д. c.
. Мы можем отфильтровать их по цвету заливки ... 

google.visualization.events.addOneTimeListener(chart, 'ready', function () {
  var rows = container.getElementsByTagName('rect');
  var bars = [];
  Array.prototype.forEach.call(rows, function(row) {
    switch (row.getAttribute('fill')) {
      case '#ffffff':
      case '#f5f5f5':
      case 'none':
        // ignore
        break;

      default:
        bars.push(row);
    }
  });

  if (bars.length > 0) {
    console.log(parseFloat(bars[0].getAttribute('width')));
  }
});

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

google.charts.load('current', {
  packages:['gantt']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent Complete');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['2014Spring', 'Spring 2014', 'spring',
     new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
    ['2014Summer', 'Summer 2014', 'summer',
     new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
    ['2014Autumn', 'Autumn 2014', 'autumn',
     new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
    ['2014Winter', 'Winter 2014', 'winter',
     new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
    ['2015Spring', 'Spring 2015', 'spring',
     new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
    ['2015Summer', 'Summer 2015', 'summer',
     new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
    ['2015Autumn', 'Autumn 2015', 'autumn',
     new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
    ['2015Winter', 'Winter 2015', 'winter',
     new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
    ['Football', 'Football Season', 'sports',
     new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
    ['Baseball', 'Baseball Season', 'sports',
     new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
    ['Basketball', 'Basketball Season', 'sports',
     new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
    ['Hockey', 'Hockey Season', 'sports',
     new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
  ]);

  var options = {
    height: 400,
    gantt: {
      trackHeight: 30
    }
  };

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

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {
    var rows = container.getElementsByTagName('rect');
    var bars = [];
    Array.prototype.forEach.call(rows, function(row) {
      switch (row.getAttribute('fill')) {
        case '#ffffff':
        case '#f5f5f5':
        case 'none':
          // ignore
          break;

        default:
          bars.push(row);
      }
    });

    if (bars.length > 0) {
      console.log(parseFloat(bars[0].getAttribute('width')));
    }
  });

  chart.draw(data, options);

  function daysToMilliseconds(days) {
    return days * 24 * 60 * 60 * 1000;
  }
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...