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/> - 元素创建渐变。

看看here，了解这些元素的外观。

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

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

演示：

＆＃13;

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);
});

＆＃13;

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

＆＃13;

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

＆＃13;

用渐变填充谷歌图表chartArea

1 个答案: