Javascript Google图表访问路径的填充属性
我试图访问堆叠区域(谷歌图表)中序列的填充属性。我希望堆叠图表的底部序列变得透明,如JSFIDLE代码所示 能请一个人帮忙吗?非常感谢你的帮助Javascript Google图表访问路径的填充属性,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我试图访问堆叠区域(谷歌图表)中序列的填充属性。我希望堆叠图表的底部序列变得透明,如JSFIDLE代码所示 能请一个人帮忙吗?非常感谢你的帮助 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div class="row"> <!-- Div that will hold the pie chart-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div class="row">
<!-- Div that will hold the pie chart-->
<div id="chart_div"></div>
</div>
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
isStacked: true,
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 },
series:
{
0: { id: 'ss223', type: 'area', backgroundColor: { fill: 'black' } },
1: { type: 'area', backgroundColor: { fill: 'transparent' }}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
load('current',{'packages':['corechart']});
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“年度”、“销售额”、“费用”],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
变量选项={
isStacked:是的,
标题:“公司业绩”,
hAxis:{title:'Year',titleTextStyle:{color:'#333'}},
变量:{minValue:0},
系列:
{
0:{id:'ss223',类型:'area',背景颜色:{fill:'black'},
1:{type:'area',backgroundColor:{fill:'transparent'}
}
};
var chart=new google.visualization.ComboChart(document.getElementById('chart_div'));
图表绘制(数据、选项);
}
只需更换…backgroundColor:{fill:'transparent'}
与……颜色:“透明”
序列将编号,从底部的零开始
请参阅以下工作片段
注意:如果要使区域为纯黑色,而不仅仅是边框,将此添加到您的
选项中
…areaOpacity:1
google.charts.load('current'{
回调:函数(){
var data=google.visualization.arrayToDataTable([
[‘年’、‘销售’、‘费用’、‘第1行’、‘第2行’],
['2013', 1000, 400, 200, 400],
['2014', 1170, 460, 200, 400],
['2015', 660, 1120, 200, 400],
['2016', 1030, 540, 200, 400]
]);
变量选项={
isStacked:是的,
标题:“公司业绩”,
hAxis:{title:'Year',titleTextStyle:{color:'#333'}},
变量:{minValue:0},
系列:
{
0:{id:'ss223',类型:'area',颜色:'transparent'},
1:{类型:'区域',颜色:'黑色'},
2:{类型:'line',颜色:'red'},
3:{类型:'line',颜色:'blue'}
}
};
var chart=new google.visualization.ComboChart(document.getElementById('chart_div'));
图表绘制(数据、选项);
},
软件包:['corechart']
});代码>
哇,真是太棒了,白帽子,太完美了。在我接受答案之前,先问一个小问题。如果我必须将折线图添加到组合图中,其中仅堆叠区域,即isStacked属性应仅针对区域而非折线图设置为true。这怎么可能符合这个解决方案呢?我问这个问题的原因是,当我在选项中添加isStacked:true时,它也会将折线图视为堆叠的,这是我不想要的。根据文档,如果isStacked
设置为true,则会堆叠相同类型的系列元素。并且仅影响条形、柱和面积系列。-我在上面的答案中添加了两行序列,它们显示正确,没有堆叠。。。