更改 Google 柱形图中鼠标悬停的栏的不透明度

Question

我是一名 Javascript 初学者。寻找一个代码片段，当鼠标悬停在谷歌柱形图中时更改条形颜色。我有以下代码用于在鼠标悬停时更改栏的角半径。

google.visualization.events.addListener(
    chart,
    "onmouseover",
    changeBorderRadius
);

function changeBorderRadius() {
    chartColumns = container.getElementsByTagName("rect");

    Array.prototype.forEach.call(chartColumns, function (column) {
        column.setAttribute("rx", 5);
        column.setAttribute("ry", 5);
        column.setAttribute("opacity", 0.5); // added this line
    });
}

我添加的行更改了图表中所有条形的不透明度。如何仅更改鼠标所指栏的颜色？

Answer 1

'onmouseover'

（和

'onmouseout'

）事件接收一个参数，该参数提供受事件影响的条形图的数据表行和列。

{row: 0, column: 1}

在这里，我们对

row

属性感兴趣，因为图表中的每个条形代表数据表中的一行。

column

永远是

1

，因为图表中只有 1 个系列。

至于查找图表中代表条形的

<rect>

元素，
我们需要在元素上使用一些东西来过滤图表中的其他

<rect>

元素。

<rect>

元素还用于绘制图表区域和周围的图表边缘。
所以我们不能只获取图表中找到的所有

<rect>

元素。

在下面的示例中，我使用条形填充颜色来查找代表条形的

<rect>

元素。

var chartColumns = chart.getContainer().querySelectorAll('rect[fill="' + chartColor + '"]');

然后数据表行从事件传递到用于设置条形不透明度的函数。

'onmouseout'

事件用于使栏返回到完全不透明

请参阅以下工作片段...

// initialize google charts
google.charts.load('current', {
  packages: ['corechart']
}).then(function drawChart() {
  // initialize variables
  var chartColor = '#3366cc';
  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
  var data = google.visualization.arrayToDataTable([
    ['Element', 'Density'],
    ['Copper', 8.94],
    ['Silver', 10.49],
    ['Gold', 19.30],
    ['Platinum', 21.45]
  ]);
  var options = {
    bar: {
      groupWidth: '95%'
    },
    colors: [chartColor],
    height: 400,
    legend: {
      position: 'none'
    },
    title: 'Density of Precious Metals, in g/cm^3',
    width: 600
  };

  // initialize chart events
  google.visualization.events.addListener(chart, 'onmouseover', chartMouseOver);
  google.visualization.events.addListener(chart, 'onmouseout', chartMouseOut);

  // draw chart
  chart.draw(data, options);

  // chart mouseover event
  function chartMouseOver(sender) {
    // set opacity to 0.5
    setBarOpacity(sender.row, 0.5);
  }

  // chart mouseout event
  function chartMouseOut(sender) {
    // set opacity to 1
    setBarOpacity(sender.row, 1);
  }

  // set bar opacity
  function setBarOpacity(index, opacity) {
    // filter bars by fill color
    var chartBars = chart.getContainer().querySelectorAll('rect[fill="' + chartColor + '"]');

    // set opacity on index provided
    chartBars[index].setAttribute('opacity', opacity);
  }
});

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