Javascript google图表更改单个直方图数据点的颜色

我有以下代码（请参阅），允许我在绘制图表后更改每个直方图数据点的颜色。它按预期工作。但是，当用户将鼠标悬停在数据点上时，颜色会混乱。发生了什么事，我该怎么解决

google.charts.load（'current'，{packages:['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var rawData=[
[‘恐龙’、‘长度’、‘颜色’]，
[“顶刺蜥蜴”，12.2，“红色”]，
[“阿尔伯塔龙（阿尔伯塔蜥蜴）”，9.1，“绿色”]，
[“异龙（其他蜥蜴）”，12.2，“绿色”]，
];
//按“长度”排序数据
var data=google.visualization.arrayToDataTable（rawData）；
data.sort（[{column:1}]）；
变量选项={
标题：“恐龙的长度，单位为米”，
图例：{位置：'无'}，
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.Histogram（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var observer=新的MutationObserver（函数（）{
var指数=0；
var项目=1；
Array.prototype.forEach.call（container.getElementsByTagName（'rect'）、function（rect）{
if（rect.getAttribute（'fill'）='#3366cc'）{
rect.setAttribute（'fill'，rawData[项目][2]）；
项目++
}
索引++；
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
图表绘制（数据、选项）；
}

---

在观察者中，需要检查所有颜色

    switch (rect.getAttribute('fill')) {
      case '#3366cc':
      case 'red':
      case 'green':
        rect.setAttribute('fill', rawData[item][2]);
        item++
        break;
    }

请参阅以下工作片段

google.charts.load（'current'{
软件包：['corechart']
}).then（函数图（）{
var rawData=[
[‘恐龙’、‘长度’、‘颜色’]，
[“顶刺蜥蜴”，12.2，“红色”]，
[“阿尔伯塔龙（阿尔伯塔蜥蜴）”，9.1，“绿色”]，
[“异龙（其他蜥蜴）”，12.2，“绿色”]，
];
//按“长度”排序数据
var data=google.visualization.arrayToDataTable（rawData）；
data.sort（[{column:1}]）；
变量选项={
标题：“恐龙的长度，单位为米”，
图例：{位置：'无'}，
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.Histogram（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var observer=新的MutationObserver（函数（）{
var指数=0；
var项目=1；
Array.prototype.forEach.call（container.getElementsByTagName（'rect'）、function（rect）{
开关（rect.getAttribute（'fill'））{
案例“#3366cc”：
案例“红色”：
“绿色”案例：
rect.setAttribute（'fill'，rawData[项目][2]）；
项目++
打破
}
索引++；
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
图表绘制（数据、选项）；
});