Javascript 如何用渐变色填充谷歌图表中的区域？

在我的谷歌图表中，我使用以下选项：

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


            }

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

到目前为止，我没有在谷歌文档中找到任何文档。有可能吗？有把戏吗

更新：@whiteHats解决方案与我的调整结果：

---

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

首先，将渐变定义添加到html的某处。
此元素不应使用

显示：无
，

否则，某些浏览器可能会忽略它。

将大小设置为零像素似乎有效

<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>

然后我们找到具有默认背景的
元素，并设置fill属性。

通常，我们可以在图表的
'ready'
事件上设置渐变填充，

但由于您使用的是动画，因此当动画出现时，渐变将被覆盖。

我们还可以在图表的
'animationfinish'
事件上设置填充，

但在动画过程中不会出现渐变

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

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var dataTable=新的google.visualization.dataTable({
科尔斯：[
{标签：'x'，类型：'number'}，
{标签：'y'，类型：'number'}
],
行：[
{c:[{v:0}，{v:25}]}，
{c:[{v:5}，{v:25}]}，
{c:[{v:10}，{v:25}]}，
{c:[{v:15}，{v:25}]}，
{c:[{v:20}，{v:25}]}，
{c:[{v:25}，{v:25}]}，
{c:[{v:30}，{v:25}]}，
{c:[{v:40}，{v:25}]}，
{c:[{v:45}，{v:25}]}，
{c:[{v:50}，{v:25}]}，
{c:[{v:55}，{v:25}]}，
{c:[{v:60}，{v:25}]}，
{c:[{v:65}，{v:25}]}，
{c:[{v:70}，{v:25}]}
]
});
var图表选项={
图表区：{
背景颜色：“#447799”
},
身高：600，
哈克斯：{
标题：“任务”
},
言辞：{
标题：“持续时间”
},
动画：{
期限：2000年，
启动：正确
},
颜色：['#6f9654']
};
var container=document.getElementById（“chart_div”）；
var chart=新的google.visualization.AreaChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
var observer=新的MutationObserver（函数（）{
container.getElementsByTagName（'svg'）[0].setAttribute（'xmlns'，'http://www.w3.org/2000/svg');
Array.prototype.forEach.call（container.getElementsByTagName（'rect'）、function（rect）{
if（rect.getAttribute（'fill'）='#447799'）{
rect.setAttribute（'fill'，'url（#我的梯度）#447799'）；
}
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
绘制（数据表，图表选项）；
});

如果我使用“path”而不是“rect”，它就会起作用。我把梯度改成了
，现在看起来很不错。
var chartOptions = {
  chartArea: {
      backgroundColor: '#447799'
  },
  ...