如何用渐变颜色填充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'

 事件上设置填充，

但这样在动画过程中就不会出现渐变了。

因此，我们必须使用

MutationObserver

，并在每次 svg 突变（绘制）时设置填充。 

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

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable({
    cols: [
      {label: 'x', type: 'number'},
      {label: 'y', type: 'number'}
    ],
    rows: [
      {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 chartOptions = {
    chartArea: {
        backgroundColor: '#447799'
    },
    height: 600,
    hAxis: {
        title: 'Tasks'
    },
    vAxis: {
        title: 'Duration'
    },
    animation:{
        duration: 2000,
        startup: true
    },
    colors: ['#6f9654']
  };

  var container = document.getElementById("chart_div");
  var chart = new google.visualization.AreaChart(container);

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      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(#my-gradient) #447799');
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  chart.draw(dataTable, chartOptions);
});

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

<div id="chart_div"></div>

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

Answer 2

它记录在 Google 图表参考页面中。

https://developers.google.com/chart/interactive/docs/gallery/linechart

查看

annotations.boxStyle

 部分的渐变。

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};