Javascript 当点击按钮时，有没有一种方法可以给谷歌堆叠条形图的特定列上色？

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

例如，当选择时，是否可以用不同的颜色突出显示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);
}

可以使用样式列角色为单个栏着色

与注释类似，将颜色添加到数据表中的数据， 下面是要给定颜色的值

值

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'{
软件包：['corechart']
}).然后（函数（）{
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,38,0,0,bdbdbd,2,9e9e9e'，''，
[2015'，40'，eeeeee'，45'，e0e0e0'，0'，bdbdbd'，5'，9e9e9e'，''，
['2016'，46'，'eeeeee'，36'，'e0e0e0'，0'，'bdbdbd'，3'，'9e9e9e'，''，
['2017'，35，空，35，空，8，空，3，空，']，
[2018年，第34期，第26期，第3期，第2期，第9e9e9e期，”，
[2019'，43'，eeeeee'，31'，e0e0e0'，2'，bdbdbd'，6'，9e9e9e'，”
]);
变量选项\u fullStacked={
fontName:“下一个”，
字体大小：“30px”，
isStacked：是的，
身高：700，
宽度：900，
图例：{位置：'无'}，
哈克斯：{
textStyle:{color:'white'}，
最小值：0，
},
言辞：{
textStyle:{color:'white'}，
最小值：0，
},
背景色：“透明”，
系列：{
0:{颜色：'#4a86ff'}，
1:{颜色：'#0d5e98'}，
2:{颜色：'#0b4c7b'}，
3:{颜色：'#18365f'}
}
};
var chart\u fullStacked=新的google.visualization.ColumnChart(
document.getElementById（'列'）
);
图表\u全堆叠。绘制（数据、选项\u全堆叠）；
});

这听起来完全可以实现，但我需要更多信息来帮助形成更完整的解决方案。明确你的目标：突出显示“选中”列意味着什么？这是悬停还是其他互动？此外，互动是在列本身上，还是在另一个图表上的相应年份上？我在页面顶部有按钮，显示我们有数据的每年。单击后，它们会在页面左侧显示相应的饼图。页面右侧是堆叠条形图，其中包含每年的所有信息。现在所有的列都用不同的蓝色着色，但是我们想实现一种方法，只用蓝色显示其中一列（从单击的一年开始），而其他列保持灰色（例如）。好的，听起来好像已经有状态表示选择了哪一年。调用
drawColumn
时，该状态是否已知且可用？如果是这样，您是否可以相应地设置
选项？（即，设置与所选年份协调的颜色）