Charts 使用谷歌图表（条形图），我可以使德巴颜色线性梯度？

我用的是条形图，我需要的是梯度，而不是实心的 在代码中，你可以看到我在纯色之后添加了“角色：风格”，但是我需要一个线性渐变

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
        ["Element", "Difference", {
            role: "style"
        }],
        ['Mg', 1.2 , "#1aab54"]           
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        calc: "stringify",
        sourceColumn: 1,
        type: "string",
        role: "annotation"
    },
    2]);

    var options = {
        title: "",
        legend: {position: 'none'},
        bar: {
            groupWidth: "50%"
        },
        hAxis: {
          viewWindowMode:'explicit',
          viewWindow: {
          max:2,
          min:0.5
          },
          ticks: [{ v: 0.5, f: 'low'}, { v: 1, f: 'middle'}, {v: 1.5, f: 'high'}],
    },
    };
    var chart_area = document.getElementById("barchart_values2");
    var chart = new google.visualization.BarChart(chart_area);
    google.visualization.events.addListener(chart, 'ready', function(){
 chart_area.innerHTML = '<img src="' + chart.getImageURI() + '" class="img-responsive">';
});
    chart.draw(view, options);

函数drawChart2（）{
var data=google.visualization.arrayToDataTable([
[“元素”、“差异”{
角色：“风格”
}],
['Mg'，1.2，“#1aab54”]
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
},
2]);
变量选项={
标题：“，
图例：{位置：'无'}，
酒吧：{
groupWidth:“50%”
},
哈克斯：{
viewWindowMode:“显式”，
视图窗口：{
最高：2，
最低：0.5
},
节拍：[{v:0.5，f:'low'}，{v:1，f:'middle'}，{v:1.5，f:'high'}]，
},
};
var chart_area=document.getElementById（“条形图_值2”）；
var chart=新的google.visualization.BarChart（图表区域）；
google.visualization.events.addListener（图表'ready'，函数（）{
chart_area.innerHTML=''；
});
图表绘制（视图、选项）；

---

}没有渐变填充选项，
但是你可以添加你自己的

首先，将渐变定义添加到html的某处。
此元素不应使用

显示：无
，

否则，某些浏览器可能会忽略它。

将大小设置为零像素似乎有效

<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="#5de694" />
    <stop offset="50%" stop-color="#1aab54" />
    <stop offset="100%" stop-color="#0c5228" />
  </linearGradient>
</svg>

然而，我无法得到梯度来通过图像，也许html2canvas会做得更好

请参阅以下工作片段


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['元素'，'差异'{
角色：“风格”
}],
['Mg'，1.2'，#1aab54']
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：'字符串化'，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”
}, 2]);
变量选项={
标题：“”，
图例：{位置：'无'}，
酒吧：{
groupWidth:'50%'
},
哈克斯：{
viewWindowMode:“显式”，
视图窗口：{
最高：2，
最低：0.5
},
节拍：[{v:0.5，f:'low'}，{v:1，f:'middle'}，{v:1.5，f:'high'}]，
},
};
var chart_area=document.getElementById（'barchart_values2'）；
var chart=新的google.visualization.BarChart（图表区域）；
google.visualization.events.addListener（图表'ready'，函数（）{
//创建观察者
var observer=新的MutationObserver（函数（）{
var svg=chart_area.getElementsByTagName（'svg'）[0]；
setAttribute（'xmlns'，'http://www.w3.org/2000/svg');
//加梯度
Array.prototype.forEach.call（chart\u area.getElementsByTagName（'rect'）、function（rect）{
if（rect.getAttribute（'fill'）='#1aab54'）{
rect.setAttribute（'fill'，'url（#我的梯度）#1aab54'）；
}
});
//创建图表图像
var svgContent=new XMLSerializer（）.serializeToString（svg）；
var domURL=window.URL | | window.webkitURL | | window；
var imageURL=domURL.createObjectURL（新Blob（[svgContent]，{type:'image/svg+xml'}））；
var image=document.getElementById（'image_div'）.appendChild（new image（））；
image.src=imageURL；
});
观察者。观察（图表区域）{
儿童名单：是的，
子树：真
});
});
图表绘制（视图、选项）；
});

没有现成的东西，看看……您好，我尝试在我的应用程序中使用它，但该条没有保留渐变颜色。我知道，
getImageURI
方法不会包含手动所做的更改--您需要使用另一种方法来生成图像，…当我尝试使用该解决方案时，我将部分转换为图像，但效果不佳。我是一个初学者，很抱歉“天真的怀疑”。非常感谢！是我需要的东西！
['Mg', 1.2 , '#1aab54']  // <-- find element by color

// create observer
var observer = new MutationObserver(function () {
  var svg = chart_area.getElementsByTagName('svg')[0];
  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

  // add gradient
  Array.prototype.forEach.call(chart_area.getElementsByTagName('rect'), function(rect) {
    if (rect.getAttribute('fill') === '#1aab54') {
      rect.setAttribute('fill', 'url(#my-gradient) #1aab54');
    }
  });
});
observer.observe(chart_area, {
  childList: true,
  subtree: true
});