谷歌时间线图表似乎建议根据文档对时间线上的各个块进行着色: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'],
};我尝试通过在我的数据行中添加第五列(颜色)来处理这个问题的被接受的答案:Google Charts API: Add Blank Row to Timeline?
具体来说,这是我认为我可以劫持来构建我的hack的函数:
(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对象中)。
发布于 2015-05-08 13:08:03
我认为您需要使用其他选项:
timeline: { groupByRowLabel: false }因为,如果您转到单行栏中的g-page:https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow,它们显示总统如何不重叠,所以在这种情况下您不能使用它,但对于您正在使用的方法,时间线确实重叠,因此它们必须在各自的行中。无论如何,阅读重叠的标题可能会很困难。
附注:我注意到了google在做什么。它从左到右分配颜色,然后进行包装。然而,标题不是换行的,它们只是从左到右。这是我做的一个小提琴:https://jsfiddle.net/camp185/2Lopnnt3/2/来展示如何包装颜色working...added更多的颜色。
https://stackoverflow.com/questions/29973440
复制相似问题