将 google 折线图的背景设置为透明和响应式

Question

我想用Googlelinechart .

这是我的项目图片

我的问题：

1) 如何设置背景颜色：透明 ??

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 的调整大小事件...

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

请参阅以下工作片段，
运行代码段，然后单击 "Full page" 查看它的变化...

注意：容器 <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

关于设备宽度（或windows宽度）的唯一反应方式就是重绘图表。这是真的，但是不要忘记在重新绘制新版本之前销毁旧图表。

 .destroy()

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

  // Example from the docs
        var myLineChart = new Chart(ctx, config);
   // Destroys a specific chart instance
        myLineChart.destroy();

我测试过，它工作正常

将 google 折线图的背景设置为透明和响应式

Set background as transparent and responsive for google Line Chart

javascript

css

charts

clappr

responsive