javascript - 如何用渐变颜色填充 Google Charts Area Chart 中的区域？

Question

在我的 google Chart 中，我使用了这个选项:

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>