Подтвердить что ты не робот

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

Диаграммы Google Timeline, похоже, предлагают раскрашивать отдельные блоки на временной шкале в документации: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#ControllingColors

Но, похоже, проблема в том, что две полосы "перекрываются" на одной строке, как вы можете видеть в этой скрипке: http://jsfiddle.net/7A88H/21/

Вот key code:

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'],
};

Я попытался сыграть с принятым ответом из этого вопроса, добавив 5 столбцов (цвет) в мои строки данных: API графиков Google: добавьте пустую строку на шкалу времени?

В частности, вот функция, которую я думал, что могу уклониться от сборки моего взлома:

(function(){                                            //anonymous self calling function to prevent variable name conficts
    var el=container.getElementsByTagName("rect");      //get all the descendant rect element inside the container      
    var width=100000000;                                //set a large initial value to width
    var elToRem=[];                                     //element would be added to this array for removal
    for(var i=0;i<el.length;i++){                           //looping over all the rect element of container
        var cwidth=parseInt(el[i].getAttribute("width"));//getting the width of ith element
        if(cwidth<width){                               //if current element width is less than previous width then this is min. width and ith element should be removed
            elToRem=[el[i]];
            width=cwidth;                               //setting the width with min width
        }
        else if(cwidth==width){                         //if current element width is equal to previous width then more that one element would be removed
            elToRem.push(el[i]);        
        }
    }
    for(var i=0;i<elToRem.length;i++)
        elToRem[i].setAttribute("fill","none"); //make invisible all the rect element which has minimum width
})();

Надежда состояла в том, чтобы захватить каждую rect (пропуская ограничивающие) и заполнить их (с помощью третьего цикла в конце) с их соответствующими цветами, но я не мог понять, как получить их связанный цвет ( который был в объектах строки) из самих объектов rect.

4b9b3361

Ответ 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);
}