Question

我希望最后一列中的所有条形都有一定的颜色。使用以下代码，仅对最顶部的样式设置样式（请参阅http://jsfiddle.net/kalyfe/gvczd6nx/）：

var data = google.visualization.arrayToDataTable([
    ['week', 'apples', 'bananas', {role: 'style'}],
    ['last week', 5, 17, ''],
    ['this week', 9, 22, ''],
    ['projection', 11, 27, 'color:#ddd;']
]);

如何将样式应用于堆积条中的列？

Answer 1

设置苹果栏的样式，例如香蕉栏的样式

var data = google.visualization.arrayToDataTable([
    ['week', 'apples', {role: 'style'}, 'bananas', {role: 'style'}],
    ['last week', 5, '', 17, ''],
    ['this week', 9, '', 22, ''],
    ['projection', 11, 'color:#ddd;', 27, 'color:#ddd;']
]);

http://jsfiddle.net/gvczd6nx/3/

Answer 2

如果你想独立设置每个列的样式，那么给出@ R3tep提到的颜色值，但如果你想要它用于列组，那么可以尝试这样：

   var data = google.visualization.arrayToDataTable([
        ['week', 'apples', 'bananas','oranges'],
        ['last week', 5, 17, 11],
        ['this week', 9, 22, 12],
        ['projection', 11, 27,10]
    ]);

  new google.visualization.ColumnChart(document.getElementById('chart')).
    draw(data, {
        title: "Weekly fruit intake",
        width: 600,
        height: 400,
        isStacked: true,
        colors: ['#0f0', '#ddd', '#ec8f6e', '#f3b49f', '#f6c7b6']
    });
}

参见演示 here

另见：https://developers.google.com/chart/interactive/docs/gallery/columnchart

如何在堆积条中设置一列的样式？

2 个答案: