Стили Google Gantt Chart с использованием CSS или Javascript - PullRequest
Новая
       29

Стили Google Gantt Chart с использованием CSS или Javascript

0 голосов
/ 04 октября 2018

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

Я проверил некоторые другие решения по переполнению стека и не смог найти решение, которое пока работает.Я думаю, что одним из возможных вариантов было бы использование SCSS и нацеливание на g элементов SVG, но у меня нет опыта работы с ним, и я мог бы использовать некоторые рекомендации (если этот метод наиболее целесообразен для использования.) 

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

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

  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([
    ['Research', 'Read documents', 'Assignment', new Date(2018, 8, 14), new Date(2018, 8, 20), null,  100,  null],
    ['Meet SO', 'Meet with partyA', 'A', new Date(2018, 8, 20), new Date(2018, 8, 28), null,  100,  'Research'],
      ['Meet EP', 'Meet with partyB', 'B', new Date(2018, 8, 28), new Date(2018, 9, 5), null,  0,  'Research, Meet SO'],
        ['Create EP', 'Create partyA Needs Assessments', 'B', new Date(2018, 9, 5), new Date(2018, 9, 12), null,  0,  'Meet EP'],
    ['Meet GM', 'Meet with partyC', 'C', new Date(2018, 9, 11), new Date(2018, 9, 19), null,  0,  'Research'], 
    ['Create BP', 'Craft best practices', 'Assignment', new Date(2018, 9, 19), new Date(2018, 9, 22), null,  0,  ' Meet GM, Meet EP, Meet FV'],
    ['Meet FV', 'Meet with partyD', 'D', new Date(2018, 9, 11), new Date(2018, 9, 19), null,  0,  'Research'],
    ['BM', 'Business Modeling', 'Assignment', new Date(2018, 9, 19), new Date(2018, 9, 26), null,  0,  'Meet EP, Meet GM, Meet FV'],
    ['CM', 'Communication Modeling', 'Assignment', new Date(2018, 10, 1), new Date(2018, 10, 9), null,  0,  'Meet EP, Meet GM, Meet FV'],
    ['Work', 'Work on deliverable', 'Assignment', new Date(2018, 10, 9), new Date(2018, 10, 13), null,  0,  'CM, BM, Create BP, Create EP'],
    ['Engage', 'Engage with community', 'Assignment', new Date(2018, 10, 15), new Date(2018, 10, 29), null,  0,  'CM'],
    ['Final', 'Pitch to admin', 'Final', new Date(2018, 10, 29), new Date(2018, 11, 13), null,  0,  'CM, BM, Create BP, Create EP, Work, Engage']
  ]);

  var options = {
    height: 1000,
    gantt: {
      criticalPathEnabled: false,
      labelStyle: {
        fontName: 'Lato'
      }
    }
  };

  var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
  chart.draw(data, options);
}

Любая помощь будет принята с благодарностью, спасибо!

...