javascript Highcharts:更改柱形图的不透明度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/24035938/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highcharts : Change opacity of a column chart
提问by Dinuka Thilanga
I need change opacity of column in stack chart when using highchart. Because i need transparent
使用 highchart 时,我需要更改堆栈图中列的不透明度。因为我需要透明
<script type="text/javascript">
$(function () {
$('#trend').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Weight Oscillation Projection'
},
xAxis: {
categories: ['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
},
yAxis: {
title: {
text: 'Weight (Kg)'
},
stackLabels: {
enabled: false,
}
},
legend: {
enabled: false,
},
tooltip: {
enabled: false,
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
}
},
},
series: [{
name: 'Jane',
data: [2, 2, 3, 2, 1],
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
color: '#fff',
style: {opacity: 0.0}
}]
});
});
</script>
I know series -> data object has not property for change style. How can we do such things?
我知道系列 -> 数据对象没有更改样式的属性。我们怎么能做这样的事情?
回答by R3tep
Use the rgba formatto change the opacity.
使用rgba 格式更改不透明度。
Example:
例子:
color: 'rgba(255, 255, 255, 0.50)'
Reference
参考
Semi-transparent colors in Highcharts are given in the rgba format rgba(255,255,255,1). The last parameter is the alpha or opacity that ranges from 0, fully transparent, to 1, fully opaque. Because of this, there are no separate opacity options in the Highcharts API.
Highcharts 中的半透明颜色以 rgba 格式 rgba(255,255,255,1) 给出。最后一个参数是 alpha 或不透明度,范围从 0(完全透明)到 1(完全不透明)。因此,Highcharts API 中没有单独的不透明度选项。
回答by Kavinda Jayakody
You can now use this property natively available on highcharts. PlotOptions.Series.Opacity
您现在可以在 highcharts 上使用本机可用的此属性。 PlotOptions.Series.Opacity