[英]How to change Line Opacity in google charts?
I am using Google Charts and I am able to change the colour of a line half way through a graph conditionally using a dataView
, as shown in code below: 我正在使用Google Charts,我可以使用
dataView
地更改图表dataView
,如下面的代码所示:
var dataView = new google.visualization.DataView(data);
dataView.setColumns([
// reference existing columns by index
0, 1,
// add function for line color
{
calc: function (data, row) {
var colorDown = '#ff9900';
var colorUp = '#27B291';
var opacity = 'opacity, 0.2;'
var currentdate = new Date();
var givendate = new Date(row.getValue)
if (data.getValue(row, 0) > currentdate) {
return colorDown;
} else {
return colorUp;
}
},
type: 'string',
role: 'style'
}
]);
I was wondering if there is way I can also change the line opacity conditionally as I can't seem to find a way to do it and other methods I have tried do not seem to work? 我想知道是否有办法我也可以有条件地改变线的不透明度,因为我似乎无法找到一种方法来做它和我试过的其他方法似乎不起作用? Thanks.
谢谢。
using the style column role, you can combine color and opacity as follows... 使用样式列角色,您可以将颜色和不透明度组合如下...
'color: #ff9900;opacity: 0.2;'
see following working snippet... 请参阅以下工作代码段...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = new google.visualization.arrayToDataTable([ ['x', 'y'], [new Date(2018, 6, 15), 2924], [new Date(2018, 6, 16), 2381], [new Date(2018, 6, 17), 2489], [new Date(2018, 6, 18), 2235], [new Date(2018, 6, 19), 2155], [new Date(2018, 6, 20), 2844], ]); var container = document.getElementById('chart_div'); var chart = new google.visualization.LineChart(container); var dataView = new google.visualization.DataView(data); dataView.setColumns([ // reference existing columns by index 0, 1, // add function for line color { calc: function (data, row) { var colorDown = 'color: #ff9900;'; var colorUp = 'color: #27B291;'; var opacity = 'opacity: 0.2;' var currentdate = new Date(); var givendate = new Date(row.getValue) if (data.getValue(row, 0) > currentdate) { return colorDown + opacity; } else { return colorUp + opacity; } }, type: 'string', role: 'style' } ]); chart.draw(dataView, { legend: { position: 'none' } }); });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.