Google时间轴图表：在“同一”行上多个时，单独为每个栏着色

The Google Timeline charts seem to suggest coloring individual blocks on the timeline per the documentation: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#ControllingColors

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

But there seems to be a problem when two bars "overlap" on the same line, as you can see in this fiddle: http://jsfiddle.net/7A88H/21/

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

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

I tried playing with the accepted answer from this question by adding a 5th column (the color) to my data rows: Google Charts API: Add Blank Row to Timeline?

我试着通过在我的数据行中添加第5列（颜色）来使用此问题中接受的答案：Google Charts API：向时间轴添加空行？

Specifically, here is the function I thought I might be able to hijack to build my 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
})();

The hope was to grab each rect (skipping the bounding ones) and filling them (with a third loop, at the end) with their appropriate colors, but I couldn't figure out how to get their associated color (which was in the row objects) from the rect objects themselves.

希望是抓住每个矩形（跳过边界）并用适当的颜色填充它们（最后用第三个循环），但我无法弄清楚如何获得它们的相关颜色（在行中）来自rect对象本身的对象）。

2 个解决方案

#1

I think you will need to use the additional options:

我想你需要使用其他选项：

timeline: { groupByRowLabel: false }

Because, if you go to the g-page: https://google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow in the Bars in One Row section they show how Presidents DON'T overlap, so you can't use it in this case, but for the method you are using it, timelines do overlap so they must be in their own row. It would probably be hard to read overlapping titles anyhow.

因为，如果你转到g-page：https：//google-developers.appspot.com/chart/interactive/docs/gallery/timeline#BarsOneRow in Bars in One Row部分，它们会显示Presidents不会重叠，所以你不能在这种情况下使用它，但对于你使用它的方法，时间轴确实重叠，所以它们必须在它们自己的行中。无论如何，阅读重叠的标题可能很难。

Side note: I noticed what google is doing. It's assigning the colors left to right, then wrapping. The titles however, are not wrapping, they just go left to right. Here is a fiddle I made: https://jsfiddle.net/camp185/2Lopnnt3/2/ to show how wrapping of colors working...added more colors.

旁注：我注意到谷歌在做什么。它从左到右分配颜色，然后包装。然而，标题不是包装，它们只是从左到右。这是我制作的小提琴：https：//jsfiddle.net/camp185/2Lopnnt3/2/，以展示如何使用颜色包装...添加更多颜色。

2 个解决方案

#1

更多相关文章

随机推荐