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

Question

我有以下代码（参见 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)', 12.2, 'green'],

  ];

  // 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>

Answer 1

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

    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)', 12.2, 'green'],
  ];

  // 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>

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

google chart change color of individual histogram data points

html

javascript

charts

google-visualization

mutation-observers