Question

在Google图表中，我使用以下选项：

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


            }

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

到目前为止，我在Google文档中找不到任何文档。可能吗有招吗？

更新：@ 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>元素，并设置fill属性。
通常，我们可以在图表的'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>

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

1 个答案: