Javascript 在谷歌图表中填充一种颜色

Javascript 在谷歌图表中填充一种颜色,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我们正在尝试在谷歌面积图中只填充一种颜色,使用不同的线颜色 如果我们使用 isStacked:true 然后它将更改图表表示形式 (更改y轴最大坐标) 我们只想填充一种颜色 (图表中最大边框下方的绿色) 你的意思是这样:还是这样 您可以将areaOpacity设置为零,以删除序列的填充。 第一个和第二个jsiddle链接之间的差异是isstacked值 series: { 0: { areaOpacity: 0 }

我们正在尝试在谷歌面积图中只填充一种颜色,使用不同的线颜色

如果我们使用

isStacked:true
然后它将更改图表表示形式
(更改y轴最大坐标)

我们只想填充一种颜色
(图表中最大边框下方的绿色)

你的意思是这样:还是这样

您可以将
areaOpacity
设置为零,以删除序列的填充。 第一个和第二个jsiddle链接之间的差异是
isstacked

series: {
          0: {
              areaOpacity: 0
          }
        },
要使两个区域的颜色“相同”,但线条的颜色不同,您需要添加一个虚拟列,如下所示:

使用a和两组相同的数据,我相信我能够达到预期的结果

请注意每个
系列的定义
使用
areaOpacity:1
防止颜色混合,前两个是相同的
这些也不是
可见的登录

google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
函数绘图图(){
var data1=google.visualization.arrayToDataTable([
[“年度”、“销售”、“费用”、“费用”、“销售”],
['2013',  1000,    400,        400,        1000  ],
['2014',  1170,    460,        460,        1170  ],
['2015',  660,     1120,       1120,       660   ],
['2016',  1030,    540,        540,        1030  ]
]);
var data2=google.visualization.arrayToDataTable([
[“年度”、“销售”、“费用”、“费用”、“销售”],
['2013',  1000,    400,        400,        1000  ],
['2014',  1170,    460,        460,        1170  ],
['2015',   660,    400,        400,         660  ],
['2016',  1030,    540,        540,        1030  ]
]);
var data3=google.visualization.arrayToDataTable([
[“年度”、“销售”、“费用”、“费用”、“销售”],
['2013',  400,    1000,        1000,        400  ],
['2014',  460,    1170,        1170,        460  ],
['2015',  400,     660,         660,        400  ],
['2016',  540,    1030,        1030,        540  ]
]);
变量选项={
标题:“公司业绩”,
哈克斯:{
标题:"年",,
titleTextStyle:{
颜色:“#333”
}
},
言辞:{
最小值:0
},
系列:{
0: {
面积不透明度:1,
颜色:“#EF9A9A”,
类型:'区域',
visibleInLegend:false
},
1: {
面积不透明度:1,
颜色:“#EF9A9A”,
类型:'区域',
visibleInLegend:false
},
2: {
颜色:“#5C6BC0”,
线宽:5,
类型:“行”
},
3: {
颜色:“#B71C1C”,
线宽:5,
类型:“行”
}
}
};
var chart=new google.visualization.ComboChart(document.getElementById('chart_div1'));
图表绘制(数据1,选项);
var chart=new google.visualization.ComboChart(document.getElementById('chart_div2'));
图表绘制(数据2,选项);
var chart=new google.visualization.ComboChart(document.getElementById('chart_div3'));
图表绘制(数据3,选项);
}


不,我们希望在蓝线下方也有相同的红色。这可以通过折线图实现吗?谢谢。近似但相同的颜色相互重叠,意味着蓝线以下的红色混合,我们不想混合。是的,我担心:P,这是我能做到的,也许其他人有更多的技巧:)。是的,这是我想要的,但当两条线不相交时,它失败了。怎么会这样?见编辑,我添加了两个额外的图表来理解,但似乎在这里工作。。。?