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

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

我有以下代码（请参见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>

解决方法

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

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

请参阅以下工作摘要...

google.charts.load('current',{
  packages:['corechart']
}).then(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) {
        switch (rect.getAttribute('fill')) {
          case '#3366cc':
          case 'red':
          case 'green':
            rect.setAttribute('fill',rawData[item][2]);
            item++
            break;
        }
        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>