如何在条形图上的鼠标悬停样式上设置自定义？

Question

我可以使用 setSelection method. 设置条形图的选择您可以在下面的 GIF 中看到这一点。

我想让图像中的白线变粗。基本上，我想在选择栏时应用自定义样式。我在 API documentation.

上找不到它

Answer 1

无法使用 google
提供的标准选项设置所选内容的样式但我们可以应用我们自己的习惯 css

条形是使用 SVG <rect> 元素绘制的
所以我们首先需要确定我们可以用来隔离所选柱的属性

使用开发者工具中的元素检查器，
看来我们可以使用以下选择器识别选定的柱...

rect[fill-opacity="0"]:not([stroke="none"])

我们可以应用自定义 css...

rect[fill-opacity="0"]:not([stroke="none"]) {
  stroke: cyan;
  stroke-width: 8px;
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2'],
    [2010, 4, 2, 10]
  ]);
  var container = document.getElementById('chart');
  var chart = new google.visualization.ColumnChart(container);
  
  // select first column when chart is drawn
  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });
  
  chart.draw(data);
});

rect[fill-opacity="0"]:not([stroke="none"]) {
  stroke: cyan;
  stroke-width: 8px;
}

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

如何在条形图上的鼠标悬停样式上设置自定义？

How to set custom on mouse over styles on bar chart?

javascript

charts

google-visualization

bar-chart