Question

我正在使用Google图表中的“新”Material Charts。它目前缺少经典图表中的很多选项，包括图例位置。

无法设置图例位置，我不得不隐藏内置图例并在画布下方的html中渲染我自己的图例。我还需要手动实现交互性，这就是我的问题所在：

材质图表具有悬停和选择状态的样式，因此当用户悬停或选择图例中的给定列时，图形会响应其操作。我可以通过API轻松控制选择状态，但看起来无法控制悬停状态。

那么，有没有办法以编程方式自定义样式，以便在用户悬停我的自定义图例时可以模仿悬停状态？

Answer 1

BarChart或ColumnChart中的列将由<rect>元素表示

但是，会有其他<rect>元素，例如图表本身，网格线等

因此找到要修改的正确<rect>元素通常是最难的部分

找到元素后，每次活动发生时都使用MutationObserver覆盖样式

请参阅以下工作代码段

为rgba切换了列的颜色，这支持透明度......

google.charts.load('current', {
  callback: function () {
    window.addEventListener('resize', drawChart, false);
    drawChart();
  },
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Y1', 'Y2'],
    ['2010', 10, 14],
    ['2020', 14, 22],
    ['2030', 16, 24],
    ['2040', 22, 30],
    ['2050', 28, 36]
  ]);

  var seriesColors = ['#00ffff', '#ff00ff'];
  var rgbaMap = {
    '#00ffff': 'rgba(0,255,0,0.5)',
    '#ff00ff': 'rgba(255,0,0,0.5)'
  };

  var options = {
    colors: seriesColors,
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(chartDiv);

  // modify svg
  var observer = new MutationObserver(function () {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('rect'), function(rect) {
      if (seriesColors.indexOf(rect.getAttribute('fill')) > -1) {
        rect.setAttribute('fill', rgbaMap[rect.getAttribute('fill')]);
      }
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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

编辑

以下是代表列

的典型<rect>元素的示例

<rect x="283" y="113" width="27" height="48" stroke="none" stroke-width="0" fill="rgba(0,255,0,0.5)"></rect>

您会注意到'id'

没有属性

您可以按索引访问，但由于<rect>元素多于列，因此您需要使用width或fill之类的内容

按索引访问...

chartDiv.getElementsByTagName('rect')[0]
chartDiv.getElementsByTagName('rect')[1]

设置特定颜色是一种简单的识别方式，类似于上面的代码段...

以编程方式自定义样式

1 个答案: