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

问题描述

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

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.

类似于：

列

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.

小提琴

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

推荐答案

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

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

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

这篇关于Google时间轴图表中的颜色基于特定值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！