我正在使用谷歌图表API，并试图制作一个包含四个系列的组合图表。其中两个是类型线，其中两个是区域。面积图似乎没有阴影（虽然它有一个像区域图一样的鼠标悬停垂直线）。我已经尝试将系列分配为stepArea类型而没有任何变化。从外部JSON文件读取数据。这是创建图表的JavaScript：
function wind_history_render(){var wind_history_data=google.visualization.arrayToDataTable(wind_history);
var wind_history_options={
backgroundColor:'transparent',
legend:{
position:'none'
},
chartArea:{
top:"5%",
height:"85%"
},
axisTitlesPosition:'out',
areaOpacity:0.0,
isStacked: false,
series:{
0:{
targetAxisIndex:0,
color:'red',
type:"Area"
},
1:{
targetAxisIndex:0,
color:'#a6cee3',
type:"Area"
},
2:{
targetAxisIndex:0,
color:'#1f78b4',
type:"line",
lineWidth:1
},
3:{
targetAxisIndex:1,
color:'#6a3d9a',
type:"line",
pointSize:1,
lineWidth:0
}
},
vAxes:{
0:{
title:'Wind Speed/Gust (MPH)',
titleTextStyle:{
color:'#1f78b4',
italic:false,
bold:true,
},
axisTitlesPosition:'none',
textStyle:{
bold:true
},
viewWindow:{
min:0,
max:history_max_speed
},
gridlines:{
count:(history_max_speed)/10+1
}
},
1:{
title:'Cardinal Direction',
titleTextStyle:{
color:'#6a3d9a',
italic:false,
bold:true
},
textStyle:{
bold:true
},
direction:-1,
viewWindow:{
min:0,
max:360
},
gridlines:{
color: 'transparent'
},
ticks:[
{v:0,f:'N'},
{v:45,f:'NE'},
{v:90,f:'E'},
{v:135,f:'SE'},
{v:180,f:'S'},
{v:225,f:'SW'},
{v:270,f:'W'},
{v:315,f:'NW'},
{v:360,f:'N'}
]
}
},
hAxis:{
showTextEvery: 72,
title:"Time (EST)",
textStyle:{
bold:true
}
}
};
var windHistoryChart=new google.visualization.ComboChart(document.getElementById('windspeed-and-direction'));
windHistoryChart.draw(wind_history_data,wind_history_options);
google.visualization.events.addListener(windHistoryChart,'select',selectHandler);
}
这是JSON的摘录。变量wind_history被设置为JSON的windHistory部分中的内容：
"windHistory": [
[
"Day",
{
"label": "Peak",
"type": "number"
},
{
"role": "tooltip"
},
{
"label": "Min",
"type": "number"
},
{
"role": "tooltip"
},
{
"label": "Avg",
"type": "number"
},
{
"role": "tooltip"
},
{
"label": "Dir",
"type": "number"
},
{
"role": "tooltip"
}
],
[
"08:35",
9.2,
"08:35 EST Peak Wind Speed: 9 mph",
null,
"08:35 EST Minimum Wind Speed: mph",
8.7,
"08:35 EST Average Wind Speed: 9 mph",
275,
"08:35 EST W (275°)"
],
[
"08:40",
9,
"08:40 EST Peak Wind Speed: 9 mph",
null,
"08:40 EST Minimum Wind Speed: mph",
8.4,
"08:40 EST Average Wind Speed: 8 mph",
272,
"08:40 EST W (272°)"
],
[
"08:45",
8.5,
"08:45 EST Peak Wind Speed: 9 mph",
null,
"08:45 EST Minimum Wind Speed: mph",
8.3,
"08:45 EST Average Wind Speed: 8 mph",
269,
"08:45 EST W (269°)"
],
[
"08:50",
8.5,
"08:50 EST Peak Wind Speed: 9 mph",
null,
"08:50 EST Minimum Wind Speed: mph",
7.9,
"08:50 EST Average Wind Speed: 8 mph",
269,
"08:50 EST W (269°)"
],
[
"08:55",
8.7,
"08:55 EST Peak Wind Speed: 9 mph",
null,
"08:55 EST Minimum Wind Speed: mph",
8,
"08:55 EST Average Wind Speed: 8 mph",
263,
"08:55 EST W (263°)"
],
[
"09:00",
9.7,
"09:00 EST Peak Wind Speed: 10 mph",
null,
"09:00 EST Minimum Wind Speed: mph",
8.7,
"09:00 EST Average Wind Speed: 9 mph",
260,
"09:00 EST W (260°)"
],
我理想地想要＆＃34; Peak＆＃34;和＃34; Min＆＃34;无论是面积图还是阶梯图。以下是我所看到的截图。
[显然我无法发布图片，因为我还没有足够的声誉，但可以在此处找到此屏幕截图的链接：https://drive.google.com/file/d/0B54o6IsW1K9FZlVsanc5RFJXRGM/view?usp=sharing]
答案 0 :(得分：0)
如果你有一个我们可以使用的完整代码的JSfiddle会更容易一点，但我会对它进行一些尝试。
主要问题是您已将areaOpacity设置为零，这会使您的区域图形看起来像线图。另外你想让你保持连续剧，我想你可能会对哪个系列的选项感到困惑。
这是一个工作的JS小提琴，使用您提供的数据将两条线作为阴影区域。关键点是将type更改为area或steppedArea（不是＆＃39;区域＆＃39;）并将areaOpacity: 0.5添加到相应的系列中。