Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/427.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Google图表访问路径的填充属性_Javascript_Charts_Google Visualization - Fatal编程技术网

Javascript Google图表访问路径的填充属性

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-->

我试图访问堆叠区域(谷歌图表)中序列的填充属性。我希望堆叠图表的底部序列变得透明,如JSFIDLE代码所示

能请一个人帮忙吗?非常感谢你的帮助

   <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,则会堆叠相同类型的系列元素。并且仅影响条形、柱和面积系列。-我在上面的答案中添加了两行序列,它们显示正确,没有堆叠。。。