javascript - 单击按钮时，有没有办法为谷歌堆积条形图的特定列着色？

Question

我正在尝试建立一个网站来比较我大学不同年份的新生。 到目前为止，我们已经设置了一个饼图来显示当前选择的年份。现在我们还想在它旁边显示一个堆叠条形图，显示总体相同的数字，但我们希望它只突出显示饼图中相应年份的堆叠柱。现在它们都是相同的颜色，并且将鼠标悬停在该列上时只会突出显示该列的一行。

是否可以在选择时以不同颜色突出显示 2017 年的列，而每隔一年保持灰度？

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawColumn);
 
function drawColumn(){
    
   var data = google.visualization.arrayToDataTable([
       ['Jahr', 'allg. HZB', 'FH-Reife', 'Berufl. Qualifizierte', 'ausl. /Studienkolleg', { role: 'annotation' }],
       ['2013', 35, 37, 0, 2, ''],
       ['2014', 40, 38, 0, 2, ''],
       ['2015', 40, 45, 0, 5, ''],
       ['2016', 46, 36, 0, 3, ''],
       ['2017', 35, 35, 8, 3, ''],
       ['2018', 34, 26, 3, 2, ''],
       ['2019', 43, 31, 2, 6, '']
    ]);

    var options_fullStacked = {
        fontName: "next_artbold",
        fontSize: "30px",
        isStacked: true,
        height: 700,
        width: 900,
        legend: { position: 'none'},
        hAxis: {
            textStyle: {color: 'white'},
            minValue: 0,
        },
        vAxis: {
            textStyle: { color: 'white' },
            minValue: 0,
        },
        backgroundColor: "transparent",
        series: {
            0:{color:'#4a86ff'},
            1:{color:'#0d5e98'},
            2:{color:'#0b4c7b'},
            3:{color:'#18365f'}
        }
    };

    var chart_fullStacked = new google.visualization.ColumnChart(
        document.getElementById('column'));
    chart_fullStacked.draw(data, options_fullStacked);
}

Answer 1

您可以使用样式 列 Angular 色为单个条形着色。

类似于注解，你给数据表中的数据加上颜色， 按照要赋予颜色的值。

null 值将允许显示选项中的系列颜色。

 var data = google.visualization.arrayToDataTable([
   ['Jahr', 'allg. HZB', {role: 'style'}, 'FH-Reife', {role: 'style'}, 'Berufl. Qualifizierte', {role: 'style'}, 'ausl. /Studienkolleg', {role: 'style'}, {role: 'annotation'}],
   ['2013', 35, '#eeeeee', 37, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2014', 40, '#eeeeee', 38, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2015', 40, '#eeeeee', 45, '#e0e0e0', 0, '#bdbdbd', 5, '#9e9e9e', ''],
   ['2016', 46, '#eeeeee', 36, '#e0e0e0', 0, '#bdbdbd', 3, '#9e9e9e', ''],
   ['2017', 35, null, 35, null, 8, null, 3, null, ''],
   ['2018', 34, '#eeeeee', 26, '#e0e0e0', 3, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2019', 43, '#eeeeee', 31, '#e0e0e0', 2, '#bdbdbd', 6, '#9e9e9e', '']
  ]);

请参阅以下工作片段。

google.charts.load('current', {
  packages: ['corechart']
}).then(function (){
 var data = google.visualization.arrayToDataTable([
   ['Jahr', 'allg. HZB', {role: 'style'}, 'FH-Reife', {role: 'style'}, 'Berufl. Qualifizierte', {role: 'style'}, 'ausl. /Studienkolleg', {role: 'style'}, {role: 'annotation'}],
   ['2013', 35, '#eeeeee', 37, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2014', 40, '#eeeeee', 38, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2015', 40, '#eeeeee', 45, '#e0e0e0', 0, '#bdbdbd', 5, '#9e9e9e', ''],
   ['2016', 46, '#eeeeee', 36, '#e0e0e0', 0, '#bdbdbd', 3, '#9e9e9e', ''],
   ['2017', 35, null, 35, null, 8, null, 3, null, ''],
   ['2018', 34, '#eeeeee', 26, '#e0e0e0', 3, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2019', 43, '#eeeeee', 31, '#e0e0e0', 2, '#bdbdbd', 6, '#9e9e9e', '']
  ]);

  var options_fullStacked = {
    fontName: "next_artbold",
    fontSize: "30px",
    isStacked: true,
    height: 700,
    width: 900,
    legend: { position: 'none'},
    hAxis: {
      textStyle: {color: 'white'},
      minValue: 0,
    },
    vAxis: {
      textStyle: { color: 'white' },
      minValue: 0,
    },
    backgroundColor: "transparent",
    series: {
      0:{color:'#4a86ff'},
      1:{color:'#0d5e98'},
      2:{color:'#0b4c7b'},
      3:{color:'#18365f'}
    }
  };

  var chart_fullStacked = new google.visualization.ColumnChart(
    document.getElementById('column')
  );
  chart_fullStacked.draw(data, options_fullStacked);
});

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