首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Google Timeline Chart:当多个条形图在同一条线上时,分别为每个条形图着色

Google Timeline Chart:当多个条形图在同一条线上时,分别为每个条形图着色
EN

Stack Overflow用户
提问于 2015-05-01 00:47:06
回答 4查看 3.9K关注 0票数 20

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

但是,当两个条在同一行上“重叠”时,似乎有一个问题,就像您在这个小提琴中看到的那样:http://jsfiddle.net/7A88H/21/

以下是关键代码:

代码语言:javascript
复制
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的函数:

代码语言:javascript
复制
(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对象中)。

EN

Stack Overflow用户

发布于 2015-05-08 13:08:03

我认为您需要使用其他选项:

代码语言:javascript
复制
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更多的颜色。

票数 1
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29973440

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档