由谷歌条形图形成的甘特图：每个条形的颜色不同答案

【问题标题】：gannt chart formed by google bar chart: different color to each bar由谷歌条形图形成的甘特图：每个条形的颜色不同
【发布时间】：2013-03-15 10:54:15
【问题描述】：

我使用 Google Charts 编写了以下类型的甘特图，但我想为每个条形分配不同的颜色。现在就我而言，因为我为 spacer 分配了透明颜色，所以我不明白如何为每个剩余的条分配不同的颜色。

这可能归结为在不同的条形图中为相同的系列分配不同的颜色。

有人可以帮我解决这个问题吗？

http://jsfiddle.net/bootkick/hp2yr/

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('timeofday', 'spacer');
    data.addColumn('timeofday', 'Runtume');
    data.addRows([
        ['PIPE', [5, 0, 0, 0],
            [7, 30, 0, 0]
        ],
        ['CNI', [6, 0, 0, 0],
            [12, 30, 0, 0]
        ],
        ['PEVC', [11, 0, 0, 0],
            [17, 30, 0, 0]
        ]
    ]);

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, {
        isStacked: true,
        width: 900,
        height: data.getNumberOfRows() * 80,
        title: 'Host Runtimes',
        vAxis: {
            title: 'Content',
            titleTextStyle: {
                color: 'black'
            }
        },
        series: {
            0: {
                visibleInLegend: false,
                color: 'transparent'
            }
        }
    });

    /*chart.draw(data, {isStacked: true,

                      series: [
                               {color: 'blue', visibleInLegend: false},
                               {color: 'red', visibleInLegend: false}
                              ]
                             });*/
}

谢谢

【问题讨论】：

每一列数据会有不同的颜色。如果您将第一列设置为间隔，然后编写一个循环来重新排列数据表，并为每个系列添加一个新列，那么您可以切换每个系列的颜色。您正在寻找的图片会很有帮助。

标签： charts bar-chart google-visualization gantt-chart

【解决方案1】：

这是一种令人讨厌的方式。希望他们制作谷歌甘特图

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('timeofday', 'spacer');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');
data.addColumn('timeofday', 'Runtime');

data.addRow(['PIPE', [3, 0, 0],
    [4, 30, 0],
    [0, 0, 0],
             [0, 0, 0],
    [0, 0, 0]
]);
data.addRow(['CNI', [1, 0, 0],
    [0, 0, 0],
    [7, 30, 0],
             [0, 0, 0],
    [0, 0, 0]
]);
data.addRow(['PEVC', [7, 0, 0],
    [0, 0, 0],
    [0, 0, 0],
    [1, 0, 0],
    [0, 0, 0]
]);

data.addRow(['MA', [7, 0, 0],
    [0, 0, 0],
    [0, 0, 0],
             [0, 0, 0],
    [1, 0, 0]
]);

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, {
    isStacked: true,
    width: 900,
    height: data.getNumberOfRows() * 60,
    title: 'Host Runtimes',
    vAxis: {
        title: 'Content',
        titleTextStyle: {
            color: 'black'
        }
    },
    series: {
        0: {
            visibleInLegend: false,
            color: 'transparent'
        },
        1: {
            visibleInLegend: false,
            color: 'red'
        },
        2: {
            visibleInLegend: false,
            color: 'green'
        },
        3: {
            visibleInLegend: false,
            color: 'blue'
        },
        4: {
            visibleInLegend: false,
            color: 'yellow'
        },
        5: {
            visibleInLegend: false,
            color: 'cyan'
        },
        6: {
            visibleInLegend: false,
            color: 'pink'
        },
        7: {
            visibleInLegend: false,
            color: 'silver'
        }
    }
});

}

在这里查看它的实际效果-： http://jsfiddle.net/bootkick/hp2yr/9/

【讨论】：