Google 图表栏：显示注释并更改颜色

Question

我使用此脚本在一个系列中显示具有不同颜色的图表栏：

function drawAttendance() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '');
    data.addColumn('number', '');
    data.addColumn({ type: 'string', role: 'style' });
    
    data.addRows(2);
    
    data.setValue(0, 0, 'Value 1');
    data.setValue(0, 1, 250);
    data.setValue(0, 2, 'rgb(200, 20, 60)');
    data.setValue(1, 0, 'Value 2');
    data.setValue(1, 1, 100);
    data.setValue(1, 2, 'rgb(20, 200, 60)');

    var options = {
        chartArea: {
            left: 200,
            height: '85%',
            width: '100%',
        },
        bar: {groupWidth: "95%"},
        legend: {position: 'none'},
        hAxis: {
            minValue: 0,
        },
        vAxis: {
        },
        height: '100%',
        width: '100%',
    };
     chart.draw(data, options);
}

问题：我需要在栏中显示注释，但是当我添加以下代码时，值显示在栏中，但颜色丢失（默认显示全部蓝色）

var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: 'stringify',
        role: 'annotation',
        sourceColumn: 1,
        type: 'string'
    }]);

chart.draw(view, options);

如何组合两种格式（显示值和不同颜色）？

Answer 1

您只需要确保样式角色包含在视图中即可。

包括列索引 2，此处...

view.setColumns([0, 1, 2, {  // <-- include style role column index
  calc: 'stringify',
  role: 'annotation',
  sourceColumn: 1,
  type: 'string'
}]);

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawAttendance);

function drawAttendance() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', '');
  data.addColumn('number', '');
  data.addColumn({
    type: 'string',
    role: 'style'
  });
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });

  data.addRows(2);

  data.setValue(0, 0, 'Value 1');
  data.setValue(0, 1, 250);
  data.setValue(0, 2, 'rgb(200, 20, 60)');
  data.setValue(1, 0, 'Value 2');
  data.setValue(1, 1, 100);
  data.setValue(1, 2, 'rgb(20, 200, 60)');

  var options = {
    chartArea: {
      left: 200,
      height: '85%',
      width: '100%',
    },
    bar: {
      groupWidth: "95%"
    },
    legend: {
      position: 'none'
    },
    hAxis: {
      minValue: 0,
    },
    vAxis: {},
    height: '100%',
    width: '100%',
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: 'stringify',
    role: 'annotation',
    sourceColumn: 1,
    type: 'string'
  }]);

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

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