Nest Span Text внутри прямоугольного элемента для диаграммы Ганта Google - PullRequest
Новая
       3

Nest Span Text внутри прямоугольного элемента для диаграммы Ганта Google

1 голос
/ 07 февраля 2020

У меня есть диаграмма Google Gantt, в которой я пытаюсь добавить текст внутри столбцов (как показано ниже), но кажется, что я добавляю их в главный контейнер, а не внутри прямоугольного элемента. Я попытался добавить аппендикл к прямоугольному узлу, но это приводит к тому, что он также неправильно вкладывается и никогда не появляется. Прилагается моя таблица с тестовыми значениями и как она выглядит, я чувствую себя очень близко, помощь приветствуется! chart

Вот мой фрагмент кода (полученный из решения другого пользователя): 

      google.visualization.events.addOneTimeListener(chart, 'ready', function () {


    var rectangles = container.getElementsByTagName('rect');
    var adjustY = 10;
    var adjustX = 15;
    for(var i=0; i<rectangles.length; i++){
        if (rectangles[i].getAttribute('x') !== '0') {
            var barLabel = container.appendChild(document.createElement('span'));
            barLabel.innerHTML = 'test';
            barLabel.style.color = '#000000';
            barLabel.style.position = 'absolute';
            barLabel.style.overflow = 'hidden';
            barLabel.style.width = (parseInt(rectangles[i].getAttribute('width') - adjustX)) + 'px';
            barLabel.style.top = (parseInt(rectangles[i].getAttribute('y')) + adjustY) + 'px';
            barLabel.style.left = (parseInt(rectangles[i].getAttribute('x')) + adjustX) + 'px';
        }
    }

1 Ответ

1 голос
/ 07 февраля 2020

во-первых, <rect> элементы являются элементами svg, и они не должны иметь детей.
Вы можете добавить элемент <text> (вместо <span>) к родительскому элементу <rect> <g> ,
но это не очень поможет, потому что вам все равно придется устанавливать координаты x, y.
также, при создании элемента svg вы должны использовать его пространство имен, используя -> createElementNS 

document.createElementNS(svgNS, 'text');

, что является причиной, по которой ничего не появилось

добавление <span> к контейнеру диаграммы - это нормально.
однако причина, по которой ваши метки расположены неправильно ,
потому что вы должны учитывать положение контейнера на странице.

, если бы это было 0, 0 на странице, ваш код работал бы.
, но так как он имеет элементы выше, ваша координата y отключена.

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

var containerBounds = container.getBoundingClientRect();

...

barLabel.style.top = (parseFloat(rectangles[i].getAttribute('y')) + adjustY + containerBounds.top) + 'px';

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

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 containerBounds = container.getBoundingClientRect();
  var chart = new google.visualization.Gantt(container);

  google.visualization.events.addOneTimeListener(chart, 'ready', function () {

    var rectangles = container.getElementsByTagName('rect');
    var adjustY = 0;
    var adjustX = 15;
    for(var i=0; i<rectangles.length; i++){
      if (rectangles[i].getAttribute('x') !== '0') {
        var barLabel = container.appendChild(document.createElement('span'));
        barLabel.innerHTML = 'test';
        barLabel.style.color = '#ffffff';
        barLabel.style.fontWeight = 'bold';
        barLabel.style.position = 'absolute';
        barLabel.style.overflow = 'hidden';
        barLabel.style.width = (parseFloat(rectangles[i].getAttribute('width') - adjustX)) + 'px';
        barLabel.style.top = (parseFloat(rectangles[i].getAttribute('y')) + adjustY + containerBounds.top) + 'px';
        barLabel.style.left = (parseFloat(rectangles[i].getAttribute('x')) + adjustX + containerBounds.left) + 'px';
      }
    }

  });

  chart.draw(data, options);

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