将背景设置为透明且对Google折线图敏感

Question

我想使用Google linechart

这是我项目的图片

我的问题：

1）如何设置background-color：transparent ??

2）如果用户单击完整页面大小（右按钮），则图表将不再再次为100％宽度，如何将其设置为100％？

这张照片是第二个问题

Answer 1

您可以通过CSS定位图表的rect属性，如下所示：

rect { 
   fill: rgb(0,0,0,0);
}

https://jsfiddle.net/kL2vaed4/2/ 这是一个使用黑色背景的示例，因此您可以看到它起作用。

Answer 2

使图表的背景透明，
使用以下配置选项...

backgroundColor: 'transparent',
chartArea: {
  backgroundColor: 'transparent',
}

使图表具有响应性，
容器尺寸更改时重新绘制图表，
例如在窗口的调整大小事件上...

window.addEventListener('resize', function () {
  chart.draw(data, options);
});

请参阅以下工作片段，
运行该代码段，然后单击“整页”以查看其更改...

注意：容器<div>具有青色背景

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y'],
    [0, 0],
    [1, 1],
    [2, 2],
    [3, 3],
    [4, 4],
    [5, 5]
  ]);

  var options = {
    backgroundColor: 'transparent',
    chartArea: {
      backgroundColor: 'transparent',
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  chart.draw(data, options);
  window.addEventListener('resize', function () {
    chart.draw(data, options);
  });
});

#chart_div {
  background-color: cyan;
}

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

Answer 3

关于设备宽度（或窗口宽度）的唯一反应就是重绘图表。的确如此，但不要在重新绘制新版本之前忘记销毁旧图表。

>>> from itertools import chain, groupby
>>> from collections import Counter
>>> 
>>> ll = [[11, 53], [2, 137], [2, 7, 31], [2, 2, 7, 31], [3, 3, 3, 29], [2, 2, 2, 3, 137], [2, 2, 7, 31], [11, 53]]
>>>
>>> f = lambda t: t[1]
>>> list(next(groupby(sorted(chain(*(Counter(l).items() for l in ll)), key=f, reverse=True), f))[1])
[(3, 3), (2, 3)]

此代码可以删除旧图表，之后您可以添加新图表

 .destroy()

我测试了，一切正常