Charts 谷歌图表中的半透明颜色？

像这样的电话

chart.draw(data, { colors: ['#e0440e', '#e6693e', '#ec8f6e', ...], ... });

。但是，我们通过了RGB颜色，没有alpha参数

在其他图表应用程序（如jqPlot、CanvasJS等）中，您可以通过rgba调用，例如

[ 'rgba(255,0,0,0.5)', 'rgba(0,255,0,0.5)', ...]

谷歌图表似乎并不支持这一点。但是有没有其他方法可以通过简单的语法传递RGBA自定义颜色呢

---

PS：对于饼图有一个类似的问题，但是对于自定义调色板，我的问题不同。

一旦

'ready'

事件在图表上触发，您可以修改svg

只需要找到一种方法来查找要修改的图表元素

在下面的工作片段中，随机颜色用于向图表提供信息

然后当

'ready'

激发时，这些颜色被找到并替换为rgba

google.charts.load（'current'{
回调：图纸，
软件包：['corechart']
});
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[‘年’、‘Y1’、‘Y2’]，
['2010', 10, 14],
['2020', 14, 22],
['2030', 16, 24],
['2040', 22, 30],
['2050', 28, 36]
]);
var seriesColors=['#00ffff'，'#ff00ff']；
变量rgbaMap={
“#00ffff”：“rgba（0255,0,0.5）”，
“#ff00ff”：“rgba（255,0,0,0.5）”
};
变量选项={
颜色：系列颜色，
};
var chartDiv=document.getElementById（'chart_div'）；
var chart=新的google.visualization.ColumnChart（chartDiv）；
//修改svg
google.visualization.events.addListener（图表'ready'，函数（）{
Array.prototype.forEach.call（chartDiv.getElementsByTagName（'rect'），function（rect）{
if（seriecolors.indexOf（rect.getAttribute（'fill'））>-1）{
rect.setAttribute（'fill'，rgbaMap[rect.getAttribute（'fill'））；
}
});
});
图表绘制（数据、选项）；
}

对所有按颜色过滤的元素使用$.attr（'opacity'，value）。带jQuery的EXAPPLE

var选项={
颜色：[“ff5722”、“1976D2”、“2196f3”、“BBDEFB”、“BDBD”]
},
conteiner=$（'div'），
data={}，//一些数据
图表=新
google.visualization.PieChart（conteiner）；
google.visualization.events.addListener（图表'ready'，函数（）{
chartSetColorOpacity（上下文，0.8，选项.颜色）；
});
google.visualization.events.addListener（图表'onmouseout'，函数（）{
chartSetColorOpacity（上下文，0.8，选项.颜色）；
});
google.visualization.events.addListener（图表，'onmouseover'，函数（目标）{
chartSetColorOpacity（上下文，0.8，选项.颜色）；
});
google.visualization.events.addListener（图表，“选择”，函数（目标）{
chartSetColorOpacity（上下文，0.8，选项.颜色）；
});
图表绘制（数据、选项）；
函数chartSetColorOpacity（$container，opacity，matchColor）{
$container=$（$container）；
if（！$container.is（'svg'））{
$container=$container.find（'svg'）；
}
如果（不透明度的类型==“数字”）{
不透明度=字符串（不透明度）；
}else if（不透明度的类型！=“字符串”）{
抛出新错误（'chartSetColorOpacity（）函数：不透明度不正确！不透明度='+不透明度）；
}
如果（匹配颜色）{
如果（匹配颜色的类型==“字符串”）{
matchColors=[matchColors]；
}
}否则{
匹配颜色=假；
}
$container.find（'*[fill]：not（不透明）'）。每个（函数（indx，元素）{
var$this=$（this）；
如果（匹配颜色！==false）{
var匹配=假，
color=$this.attr（'fill'）.toUpperCase（）；
对于（var i=matchColors.length-1；i>=0；i--）{
if（matchColors[i].toUpperCase（）==color）{
匹配=真；
打破
}
}
如果（！匹配）返回；
}
$this.attr（'opacity'，opacity）；
});
}

我也在想同样的事情，我相信唯一可能的方法是编写JavaScript来操纵SVG。例如，您可以提供

dataOpacity

属性，该属性被记录为为为所有系列设置不透明度。未被记录的是，它可以在

系列：

元素内按系列提供，然后它将控制单个系列中所有数据点的透明度。对于系列中的单个数据点，可以从

{role:“style”}

数据列中提供这些数据点。非常好的解决方案！为了使它更通用（也可以使用饼图），我在svg标记中处理了所有具有填充属性的元素：jQuery语法：$（“svg”）。查找（“*[fill]”）。每个（…）。这也有效——仅供参考：使用十六进制值来填充图表，而不是颜色名称，例如

“red”，“黑色”

——图表将

fill

值更改为十六进制等效值（

“#ff0000”、“#000000”

）——这可能导致查找失败……我们应该始终使用十六进制的web颜色值，或者在扩展为不透明度时使用rgba。我认为将其与颜色名称或3位数符号（如#fa0表示#ffaa00）混淆是一种不好的做法，很难维护。其他一些重要的注意事项：所有十六进制值都应该是小写，否则代码将无法工作！这是因为所有填充值（如#FFAA00）都会自动转换为#FFAA00。