Диаграмма временной шкалы Google: каждый цвет помечается каждый раз, когда несколько на "одинаковой" линии

Ответ 1

Думаю, вам нужно будет использовать дополнительные опции:

timeline: { groupByRowLabel: false }

Потому что, если вы перейдете на g-страницу: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow в разделе "Бары в одном ряду", они показывают, как президенты НЕ перекрываются, поэтому вы не можете использовать его в этом случае, но для метода, который вы используете, временные рамки перекрываются, поэтому они должны быть в их собственной строке. В любом случае, вероятно, будет трудно читать перекрывающиеся заголовки.

Боковое примечание: я заметил, что делает Google. Он назначает цвета слева направо, а затем завертывает. Заголовки, однако, не обертываются, они просто идут слева направо. Вот скрипка, которую я сделал: https://jsfiddle.net/camp185/2Lopnnt3/2/, чтобы показать, как обертывание цветов работает... добавлено больше цветов.

Ответ 2

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1796, 2, 3),  new Date(1801, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  var options = {
    colors: ['#ff0000', '#00ff00', '#0000ff'],
    timeline: { groupByRowLabel: false }
  };

  chart.draw(dataTable, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

<script src="https://www.google.com/jsapi?.js"></script>
<div id='example5.4'></div>

Ответ 3

Надеюсь, что это поможет вам:

google.load("visualization", "1", {packages:["timeline"]});
google.setOnLoadCallback(drawChart);

// google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
      [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)', new Date(1801, 2, 4), new Date(1809, 2, 4) ]

    ]);
  
 // dataTable.addRows([
 //   [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
//    [ 'red/green/blue', 'NAME OF BAR (should be GREEN) (00ff00)', new Date(1796, 2, 3),  new Date(1801, 2, 3) ],
//    [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

  var options = {
    colors: ['#ff0000', '#00ff00', '#0000ff'],
  };

  chart.draw(dataTable, options);
	
}

<script src="https://www.google.com/jsapi?.js"></script>
<div id='example5.4'></div>

Ответ 4

Есть два способа сделать то, что вы хотите, оба из которых меняют цвет фона на основе заголовка, который вы даете строке. С вашим текущим кодом, когда вы наводите курсор на одну из строк, он отображает информацию об этой строке. Однако, оставляя зависание, он перерисовывает ящик, делая его намного более сложным. Я сделал это для вас двумя способами:

JSFiddle with Interactivity отключен (гораздо проще.. к сожалению, я сделал это после того, как сделал сложный)

JSFiddle с включенными интерактивными функциями и беспорядочными функциями setTimeOut (не всегда работает)

Здесь код, когда интерактивность отключена:

function drawChart() {
  var container = document.getElementById('example5.4');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn({ type: 'string', id: 'Role' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });
  dataTable.addRows([
    [ 'red/green/blue', 'SHORT TEXT GREEN(00ff00)', new Date(1796, 2, 3),  new Date(1801, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be BLUE) (0000ff)',  new Date(1801, 2, 3),  new Date(1809, 2, 3) ],
    [ 'red/green/blue', 'NAME OF BAR (should be RED) (ff0000)', new Date(1789, 3, 29), new Date(1797, 2, 3) ]]);

 // dataTable.addRows([]);

  var options = {
    colors: ['#000', '#000', '#000'], // assign black background to each row
   enableInteractivity: false //interactivity disabled
  };

  chart.draw(dataTable, options);
  var elements = document.getElementsByTagName("text");
  for(var el in elements)
  {
      if(typeof colorArray[elements[el].innerHTML] != "undefined")
      {
            setColor(elements[el],colorArray[elements[el].innerHTML]);
      }
  }
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

var colorArray = []; // format:  colorArray["TEXT IN ROW"] = "COLOR"
colorArray["NAME OF BAR (should be RED) (ff0000)"] = "#ff0000";
function setColor(elem,newColor)
{
          var rect = elem.previousSibling;
          var rTitle = rect.innerHTML;
          rect.setAttribute("fill",newColor);
}