Svg 用渐变填充google图表区域

我一直在探索谷歌图表的功能，现在我正试图定制一个散点图。 我得到了以下函数：

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

这成功地将仅图表区域的背景色更改为灰色，这非常好。但是现在我想实现一个渐变，从图表的左下角到右上角，包含3种颜色，从绿色到黄色再到红色

有没有什么方法可以把它放到图表中，因为我一直试图在文档中找到任何东西，但只能找到一些旧文档，即：但找不到实现它的方法

---

谢谢

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

看看这些元素是什么样子的

您可以做什么： 绘制完图表后，将一个插入

样式可以通过CSS设置，但注意：SVG有自己的样式属性，请参见：

演示：

google.loadvisualization，1，{packages:[corechart]}； google.setOnLoadCallbackfunction{ var container=document.getElementById'chart\u div'， data=google.visualization.arrayToDataTable[ [‘机会’、‘影响’]， [ 5, 4], [ 1, 2] ], 选项={ hAxis:{title:'Chance'，minValue:0，maxValue:5}， 变量：{title:'Impact'，最小值：0，最大值：5}， 图例：“无” }, 图表=新的google.visualization.ScatterChartcontainer，选项， createSVG=函数n、a、b{ 变量xmlns=http://www.w3.org/2000/svg, e=document.createElements xmlns，n； a中的forvar k{ e、 setAttributeNS null，k，a[k]； } b中的forvar k{ e、 集合属性k，b[k]； } 返回e； }; google.visualization.events.addListenerchart“就绪”，函数{ var gradient=createSVG'linearGradient'，{ x1:0，y1:1，x2:1，y2:0 },{ id:'fx' } ; document.getElementById'chart\u div' .querySelector'svg>defs'.appendChildgradient； appendChildcreateSVG'stop'，{offset:'0%}； gradient.appendChildcreateSVG'stop'，{offset:'50%}； gradient.appendChildcreateSVG'stop'，{offset:'100%}； }; 图表。绘图数据，选项； }; html，正文，图表分区{ 身高：100%； 保证金：0； 填充：0； } 图表分区svg>g>rect{ 填充：urlfx！重要； 填充不透明度：1！重要； } fx停止：n-child1{ 停止颜色：绿色； } fx停止：n-child2{ 停止颜色：黄色； } fx停止：n-child3{ 停止颜色：红色； }

---

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

看看这些元素是什么样子的

您可以做什么： 绘制完图表后，将一个插入

样式可以通过CSS设置，但注意：SVG有自己的样式属性，请参见：

演示：

google.loadvisualization，1，{packages:[corechart]}； google.setOnLoadCallbackfunction{ var container=document.getElementById'chart\u div'， data=google.visualization.arrayToDataTable[ [‘机会’、‘影响’]， [ 5, 4], [ 1, 2] ], 选项={ hAxis:{title:'Chance'，minValue:0，maxValue:5}， 变量：{title:'Impact'，最小值：0，最大值：5}， 图例：“无” }, 图表=新的google.visualization.ScatterChartcontainer，选项， createSVG=函数n、a、b{ 变量xmlns=http://www.w3.org/2000/svg, e=document.createElements xmlns，n； a中的forvar k{ e、 setAttributeNS null，k，a[k]； } b中的forvar k{ e、 集合属性k，b[k]； } 返回e； }; google.visualization.events.addListenerchart“就绪”，函数{ var gradient=createSVG'linearGradient'，{ x1:0，y1:1，x2:1，y2:0 },{ id:'fx' } ; document.getElementById'chart\u div' .querySelector'svg>defs'.appendChildgradient； appendChildcreateSVG'stop'，{offset:'0%}； gradient.appendChildcreateSVG'stop'，{offset:'50%}； gradient.appendChildcreateSVG'stop'，{offset:'10 0%'}; }; 图表。绘图数据，选项； }; html，正文，图表分区{ 身高：100%； 保证金：0； 填充：0； } 图表分区svg>g>rect{ 填充：urlfx！重要； 填充不透明度：1！重要； } fx停止：n-child1{ 停止颜色：绿色； } fx停止：n-child2{ 停止颜色：黄色； } fx停止：n-child3{ 停止颜色：红色； }

---

非常感谢你的回答。我只想指出，这在firefox中不起作用。我目前正试图找出哪里出了问题，但对于其他浏览器来说，这是一个非常好的解决方案。奇怪的是，代码片段在firefox中确实可以工作。Misterious，我在FF中访问此页面，当我运行代码片段时，我看到了…渐变我知道，但渐变确实在chrome中显示，但在firefox中没有，而在stackoverflow://Dr.Molle处运行代码时，它在两个浏览器上都显示出来，非常棒。我能够为一个iOS应用程序使用渐变背景填充。它就像一个符咒，DUUUUUDE！你怎么知道的！？太神了谢谢顺便问一下：那是什么东西？非常感谢你的回答。我只想指出，这在firefox中不起作用。我目前正试图找出哪里出了问题，但对于其他浏览器来说，这是一个非常好的解决方案。奇怪的是，代码片段在firefox中确实可以工作。Misterious，我在FF中访问此页面，当我运行代码片段时，我看到了…渐变我知道，但渐变确实在chrome中显示，但在firefox中没有，而在stackoverflow://Dr.Molle处运行代码时，它在两个浏览器上都显示出来，非常棒。我能够为一个iOS应用程序使用渐变背景填充。它就像一个符咒，DUUUUUDE！你怎么知道的！？太神了谢谢顺便问一下：那是什么东西？