如何用渐变颜色填充GoogleCharts AreaChart中的区域？

Question

对于我的谷歌图表，我使用以下选项：

chartOptions: {
                hAxis: {
                    title: 'Tasks'
                },
                vAxis: {
                    title: 'Duration'
                },
                animation:{
                    duration: 2000,
                    startup: true
                },
                colors: ['#6f9654']


            }

如何更改图表下方区域的颜色以及如何用渐变填充它？（我不想填充整个图表的背景）

到目前为止我在谷歌文档上没有找到任何文档。有可能吗？有什么窍门吗？

更新：@whiteHats 解决方案与我的改编的结果：

Answer 1

没有图表区域渐变填充的选项，
但您可以添加自己的...

首先，将渐变定义添加到 html 的某处。
该元素不应使用 隐藏display: none，
否则某些浏览器可能会忽略它。
将大小设置为零像素似乎可行。

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="my-gradient" x2="1" y2="1">
    <stop offset="0%" stop-color="#447799" />
    <stop offset="50%" stop-color="#224488" />
    <stop offset="100%" stop-color="#112266" />
  </linearGradient>
</svg>

接下来，我们需要能够识别<rect>构成图表区域的元素。
此处使用默认背景颜色。

var chartOptions = {
  chartArea: {
      backgroundColor: '#447799'
  },
  ...

然后我们找到<rect>具有默认背景的元素，并设置填充属性。
通常，我们可以在图表的'ready'事件上设置渐变填充，
但由于您使用的是动画，因此当动画发生时渐变将被覆盖。
我们还可以在图表的'animationfinish'事件上设置填充，
但这样在动画期间就不会出现渐变。

因此，我们必须使用 a MutationObserver，并在每次 svg 突变（绘制）时设置填充。

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

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="my-gradient" x2="1" y2="1">
    <stop offset="0%" stop-color="#447799" />
    <stop offset="50%" stop-color="#224488" />
    <stop offset="100%" stop-color="#112266" />
  </linearGradient>
</svg>

var chartOptions = {
  chartArea: {
      backgroundColor: '#447799'
  },
  ...