Google时间轴图表:在"同一"行上多个时,单独为每个栏着色

Question

Google时间线图表似乎建议根据文档在时间轴上对单个块进行着色:https: //google-developers.appspot.com/chart/interactive/docs/gallery/timeline#ControllingColors

但是当两个柱子在同一条线上"重叠"时似乎有一个问题,正如你在这个小提琴中看到的那样:http: //jsfiddle.net/7A88H/21/

这是关键代码:

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列(颜色)来使用此问题的接受答案: Google Charts API:向时间轴添加空行？

具体来说,这是我认为我可以劫持建立我的黑客的功能:

(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物体本身.

Answer 1

有两种方法可以完成您想要的操作，这两种方法都根据您为行指定的标题更改背景颜色。使用当前代码，当您将鼠标悬停在其中一行上时，它会显示有关该行的信息。然而，当离开悬停时，它会重新绘制盒子，使其变得更加复杂。我已经为你做了两种方式：

禁用交互性的 JSFiddle（更简单..不幸的是，我在完成复杂的任务后又做了这个任务）

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);
}

注意：如果页面太窄并且行中的文本用省略号 (...) 缩短，则此方法会失败，因为它基于每行中的文本。

-- 没有破解的旧答案 --

进一步研究后，解决此问题的一个简单方法是缩短绿色条的文本，因为即使添加新的单独行，绿色框的文本也无法放入框内。

此外，它按行处理颜色，因此由于绿色条被推到新行，因此蓝色条变为绿色。我会添加任何将在单独的语句中创建新行的行，只是为了使其映射更符合逻辑，尽管数组的顺序并不重要。

这是 JSFiddle