谷歌图表更改单个直方图数据点的颜色

问题描述

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

google.charts.load('current',{packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var rawData = [
    ['Dinosaur','Length','color'],['Acrocanthosaurus (top-spined lizard)',12.2,'red'],['Albertosaurus (Alberta lizard)',9.1,'green'],['Allosaurus (other lizard)',];

  // sort data by 'Length'
  var data = google.visualization.arrayToDataTable(rawData);
  data.sort([{column: 1}]);

  

  var options = {
    
    title: 'Lengths of dinosaurs,in meters',legend: { position: 'none' },};

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Histogram(container);

  google.visualization.events.addListener(chart,'ready',function () {
    var observer = new MutationObserver(function () {
      var index = 0;
      var item = 1;
      Array.prototype.forEach.call(container.getElementsByTagName('rect'),function (rect) {
        
          if (rect.getAttribute('fill') === '#3366cc') {
            rect.setAttribute('fill',rawData[item][2]);
            item++
          }
          
          index++;
        
      });
    });
    observer.observe(container,{
      childList: true,subtree: true
    });
  });

  chart.draw(data,options);
}

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）