Google时间轴图表中的颜色基于特定值(Color in Google's Timeline Chart bars based in the a specific value)

其他开发 IT屋
百度翻译此文   有道翻译此文
问 题

I would like to create groups of colors for the bars. The example below is raw. I would like to add a column with a category type, and based on that category I will color the bar.

Something like:

Column

dataTable.addColumn({ type: 'string', id: 'Category' });

Line

[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15),  new Date(2014, 1, 25) ]]);

Based on Category the bar should have a specific color.

Fiddle

google.load("visualization", "1", {packages: ["timeline"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Group' });
    dataTable.addColumn({ type: 'string', id: 'ID' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
        [ 'GROUP #1', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
        [ 'GROUP #1', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
        [ 'GROUP #1', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
        [ 'GROUP #1', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
        [ 'GROUP #1', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
        [ 'GROUP #2', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
        [ 'GROUP #3', 'C00006', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
        [ 'GROUP #4', 'C00007', new Date(2014, 1, 15),  new Date(2014, 1, 25) ]]);

    var rowHeight = 41;
    var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;

    var options = {
        timeline: { 
            groupByRowLabel: true,
            rowLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14,
                color: '#333333'
            },
            barLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14
            }
        },                          
        avoidOverlappingGridLines: true,
        height: chartHeight,
        width: '100%'
    };

    chart.draw(dataTable, options);
}
解决方案

There's nothing in the Timeline visualization that will do this for you, but you can set the colors option to whatever you need to get the bars the right color. You can parse the DataTable to build the colors array, and then use a DataView to hide your category column from the Timeline (since the Timeline wouldn't know what to do with it). Here's an example:

function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Group' });
    dataTable.addColumn({ type: 'string', id: 'Category' });
    dataTable.addColumn({ type: 'string', id: 'ID' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
        [ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
        [ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
        [ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1),  new Date(2014, 3, 15) ],
        [ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21),  new Date(2014, 2, 19) ],
        [ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1),  new Date(2014, 0, 15) ],
        [ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8),  new Date(2014, 2, 15) ],
        [ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1),  new Date(2014, 5, 15) ],
        [ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15),  new Date(2014, 1, 25) ]
    ]);

    var colors = [];
    var colorMap = {
        // should contain a map of category -> color for every category
        CategoryA: '#e63b6f',
        CategoryB: '#19c362',
        CategoryC: '#592df7'
    }
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
        colors.push(colorMap[dataTable.getValue(i, 1)]);
    }

    var rowHeight = 41;
    var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;

    var options = {
        timeline: { 
            groupByRowLabel: true,
            rowLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14,
                color: '#333333'
            },
            barLabelStyle: {
                fontName: 'Roboto Condensed',
                fontSize: 14
            }
        },                          
        avoidOverlappingGridLines: true,
        height: chartHeight,
        width: '100%',
        colors: colors
    };

    // use a DataView to hide the category column from the Timeline
    var view = new google.visualization.DataView(dataTable);
    view.setColumns([0, 2, 3, 4]);

    chart.draw(view, options);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});

See it working here: http://jsfiddle.net/asgallant/7A88H/

本文地址:IT屋 » Color in Google&#39;s Timeline Chart bars based in the a specific value

问 题

我想为酒吧创建一组颜色。下面的例子是原始的。我想添加一个带有类别类型的列,并且基于该类别,我将为该条着色。



类似于:





  dataTable.addColumn({type:'string',id :'Category'}); 




  ['GROUP#1','CategoryA','C00001',新日期(2014,0,1),新日期(2014,0,31)],
['GROUP#1','CategoryA','C00002',新日期(2014,1,1),新日期(2014,1,28)],
['GROUP#1','CategoryA ','C00003',新日期(2014,3,1),新日期(2014,3,15)],
['GROUP#1','CategoryB','C00003',新日期(2014) ,0,21),新日期(2014,2,19)],
['GROUP#1','CategoryA','C00004',新日期(2014,0,1),新日期(2014) ,
['GROUP#2','CategoryC','C00005',新日期(2014,2,8),新日期(2014,2,15)],
['GROUP#3','CategoryC','C00006',新日期(2014,5,1),新日期(2014,5,15)],
['GROUP#4','CategoryA ','C00007',新日期(2014,1,15),新日期(2014,1,25)]]);


根据类别栏应该有特定的颜色。



小提琴



  google.load(“visualization”,“1”,{packages:[“timeline”]}); 
google.setOnLoadCallback(drawChart);

函数drawChart(){
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({type:'string',id:'Group'});
dataTable.addColumn({type:'string',id:'ID'});
dataTable.addColumn({type:'date',id:'Start'});
dataTable.addColumn({type:'date',id:'End'});
dataTable.addRows([
['GROUP#1','C00001',new Date(2014,0,1),new Date(2014,0,31)],
[ 'GROUP#1','C00002',新日期(2014,1,1),新日期(2014,1,28)],
['GROUP#1','C00003',新日期(2014) ,3,1),新日期(2014,3,15)],
['GROUP#1','C00003',新日期(2014,0,21),新日期(2014,2,19) )],
['GROUP#1','C00004',新日期(2014,0,1),新日期(2014,0,15)],
['GROUP#2', 'C00005',新日期(2014,2,8),新日期(2014,2,15)],
['GROUP#3','C00006',新日期(2014,5,1),新日期(2014,5,15)],
['GROUP#4','C00007',新日期(2014,1,15),新日期(2014,1,25)]]);

var rowHeight = 41;
var chartHeight =(dataTable.getNumberOfRows()+ 1)* rowHeight;

var options = {
timeline:{
groupByRowLabel:true,
rowLabelStyle:{
fontName:'Roboto Condensed',
fontSize :14,
color:'#333333'
},
barLabelStyle:{
fontName:'Roboto Condensed',
fontSize:14
}
},
avoidOverlappingGridLines:true,
height:chartHeight,
width:'100%'
};

chart.draw(dataTable,options);


解决方案

这会为你做到这一点,但你可以设置颜色选项来满足你需要的任何条件以获得正确的颜色。您可以解析DataTable来构建颜色数组,然后使用DataView从时间轴中隐藏类别列(因为时间轴不知道如何处理它)。下面是一个例子:

 函数drawChart(){
var container = document.getElementById('example4.2') ;
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();

dataTable.addColumn({type:'string',id:'Group'});
dataTable.addColumn({type:'string',id:'Category'});
dataTable.addColumn({type:'string',id:'ID'});
dataTable.addColumn({type:'date',id:'Start'});
dataTable.addColumn({type:'date',id:'End'});
dataTable.addRows([
['GROUP#1','CategoryA','C00001',新日期(2014,0,1),新日期(2014,0,31)],
['GROUP#1','CategoryA','C00002',新日期(2014,1,1),新日期(2014,1,28)],
['GROUP#1', 'CategoryA','C00003',新日期(2014,3,1),新日期(2014,3,15)],
['GROUP#1','CategoryB','C00003',新日期(2014,0,21),新日期(2014,2,19)],
['GROUP#1','CategoryA','C00004',新日期(2014,0,1),新日期(2014,0,15)],
['GROUP#2','CategoryC','C00005',新日期(2014,2,8),新日期(2014,2,15)],
['GROUP#3','CategoryC','C00006',新日期(2014,5,1),新日期(2014,5,15)],
['GROUP#4', 'CategoryA','C00007',新日期(2014,1,15),新日期(2014,1,25)]
]);

var colors = [];
var colorMap = {
//应包含类别地图 - >每个类别的颜色
CategoryA:'#e63b6f',
CategoryB:'#19c362',
CategoryC:'#592df7'
}
for(var i = 0; i< dataTable.getNumberOfRows(); i ++){
colors.push(colorMap [dataTable.getValue(i,1)]);
}

var rowHeight = 41;
var chartHeight =(dataTable.getNumberOfRows()+ 1)* rowHeight;

var options = {
timeline:{
groupByRowLabel:true,
rowLabelStyle:{
fontName:'Roboto Condensed',
fontSize :14,
color:'#333333'
},
barLabelStyle:{
fontName:'Roboto Condensed',
fontSize:14
}
},
avoidOverlappingGridLines:true,
height:chartHeight,
width:'100%',
colors:colors
};

//使用DataView从时间轴隐藏类别列
var view = new google.visualization.DataView(dataTable);
view.setColumns([0,2,3,4]);

chart.draw(view,options);
}
google.load('visualization','1',{packages:['timeline'],callback:drawChart});


看到它在这里工作: http://jsfiddle.net/asgallant/7A88H/


本文地址:IT屋 » Google时间轴图表中的颜色基于特定值

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起