我正在研究谷歌条形图，我坚持为单个条形添加颜色答案

【问题标题】：i am working on google bar charts, i am stuck with adding colours to individual bars我正在研究谷歌条形图，我坚持为单个条形添加颜色
【发布时间】：2020-08-17 01:33:58
【问题描述】：

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My Web Page</h1>

<div id="piechart"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

// Draw the chart and set the chart values


var a = [['Work', 8], ['Eat', 2], ['TV', 4], ['Gym', 2], ['Sleep', 8], ['walk', 2], ['games', 2], ['chess', 2], ['drink', 4], ['dance', 6]];
a.sort(compareSecondColumn);

function compareSecondColumn(a, b) {
    if (a[1] === b[1]) {
        return 0;
    }
    else {
        return (a[1] > b[1]) ? -1 : 1;
    }
}



// Draw the chart and set the chart values
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],a[0],a[1],a[2],a[3],a[4]
        
    ]);
    // Optional; add a title and set the width and height of the chart
    var options = { 'title': 'the title', 'width': 550, 'height': 400 };
    // Display the chart inside the <div> element with id="piechart"
    var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
    chart.draw(data, options);
}

</script>

</body>
</html>

我使用的是条形图，它只显示默认的蓝色。
我使用了一个数组来删除没有数据的列（如 0）
喜欢对数据进行排序
我想为每一列显示单独的颜色
像红色、绿色一样，每个条都有不同的颜色
我也喜欢添加注释
提前致谢

【问题讨论】：

检查这个答案的颜色 --> cannot Change Individual Bar Color -- 和 this answer 的注释
我尝试添加 ['Task', 'Hours per Day',{ role: "style" } and{ role: 'annotation' } ]a[0],a[1],a [2],a[3],a[4]
然后它也显示为蓝色
var a = [['Work', 8,"#b87333",8], ['Eat', 2,"#b87333",2], ['TV', 4," #b87333",4]]

标签： charts colors annotations google-visualization bar-chart

【解决方案1】：

上述 cmets 中发布的列标题和值在这里似乎可以正常工作...

所做的唯一更改...

将type 属性添加到样式和注释角色。
为风格角色添加了不同的颜色。

请参阅以下工作 sn-p...

var a = [['Work', 8, "#E53935", 8], ['Eat', 2, "#1E88E5", 2], ['TV', 4, "#43A047", 4]];
a.sort(compareSecondColumn);

function compareSecondColumn(a, b) {
  if (a[1] === b[1]) {
    return 0;
  }
  else {
    return (a[1] > b[1]) ? -1 : 1;
  }
}

google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours per Day', {role: 'style', type: 'string'}, {role: 'annotation', type: 'number'}],a[0],a[1],a[2]
  ]);

  var options = {
    title: 'the title',
    width: 550,
    height: 400,
    legend: 'none'
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('piechart'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>

【讨论】：