如何提取 Google 图表的行条目宽度

Question

我在提取 Google 甘特图上选定行的宽度时遇到困难。为了进一步详细说明，我需要单个数据行的宽度，我可以在 'rect' 标记下的代码中看到它，但不确定如何正确调用宽度检索语法。

ganttchart

Answer 1

首先，等待图表的 'ready' 事件触发。

然后我们可以从图表中得到<rect>个元素。
除了代表一行的元素之外，还有其他 <rect> 个元素。

比如图表区等
我们可以通过填充颜色过滤掉那些...

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>

如何提取 Google 图表的行条目宽度

How can I extract row entry width of Google Chart

html

javascript

charts

google-visualization