用渐变填充谷歌图表chartArea

Question

我一直在探索谷歌图表的功能，现在我正在尝试自定义散点图。 我得到了以下功能：

function drawScatterChart(){
    var data = google.visualization.arrayToDataTable([
          ['Chance', 'Impact'],
          [ 5,      4],
          [ 1,      2]
        ]);
    var options = {
          hAxis: {title: 'Chance', minValue: 0, maxValue: 5},
          vAxis: {title: 'Impact', minValue: 0, maxValue: 5},
          legend: 'none',
          'chartArea' : { 'backgroundColor' : '#F4F4F4' } 
        };
    var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
    chart.draw(data, options);
}

这成功地将仅chartArea的背景颜色更改为灰色，这很棒。但现在我想实现一个渐变，从图表的左下角到右上角，包含 3 种颜色（绿色到黄色到红色）。

有什么办法可以将其破解到图表中，因为我一直在尝试在文档中查找任何内容并且只能找到一些旧文档（即：https://developers.google.com/chart/image/docs/chart_params）但找不到实现此功能的方法。

谢谢！

Answer 1

此图表将使用 SVG 创建。
在 SVG 中，渐变将通过<linearGradient/>-元素创建。

看看http://tutorials.jenkov.com/svg/svg-gradients.html，看看这些元素的样子。

你可以做什么： 绘制图表后，将<linearGradient/> 注入<defs/>。

样式可以通过 CSS 设置，但请注意：SVG 有自己的样式属性，请参阅：http://tutorials.jenkov.com/svg/svg-and-css.html

演示：

---

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function() {
  var   container  = document.getElementById('chart_div'),
        data       = google.visualization.arrayToDataTable([
                      ['Chance', 'Impact'],
                      [ 5,      4],
                      [ 1,      2]
                    ]),
        options    = {
                      hAxis: {title: 'Chance', minValue: 0, maxValue: 5},
                      vAxis: {title: 'Impact', minValue: 0, maxValue: 5},
                      legend: 'none'
                     },
        chart      = new google.visualization.ScatterChart(container,options),
        createSVG  = function(n,a,b){
                      var xmlns = "http://www.w3.org/2000/svg",
                          e     = document.createElementNS (xmlns, n);
                      for(var k in a){
                        e.setAttributeNS (null, k,a[k]);
                      }
                      for(var k in b){
                        e.setAttribute (k,b[k]);
                      }
                      return e;
                    };

  google.visualization.events.addListener(chart, 'ready', function(){
    
    var gradient  =createSVG('linearGradient',{  
                                x1:0,y1:1,x2:1,y2:0
                              },{
                                id:'fx'
                              }
                            );
    document.getElementById('chart_div')
      .querySelector('svg>defs').appendChild(gradient);
    gradient.appendChild(createSVG('stop',{offset:'0%'}));
    gradient.appendChild(createSVG('stop',{offset:'50%'}));
    gradient.appendChild(createSVG('stop',{offset:'100%'}));
  });

  chart.draw(data, options);
});

html,body,#chart_div{
  height:100%;
  margin:0;
  padding:0;
}
#chart_div svg>g>rect { 
    fill: url(#fx) !important;
    fill-opacity:1 !important;
}

#fx stop:nth-child(1){ 
  stop-color: green; 
}
                
#fx stop:nth-child(2){ 
  stop-color: yellow;
}

#fx stop:nth-child(3){ 
  stop-color: red; 
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div  id="chart_div"></div>