谷歌可视化面积图没有阴影

Google Visualization Area Chart not Shaded

本文关键字:有阴影 面积图 可视化 谷歌      更新时间:2023-09-26

我正在使用谷歌图表API,并试图制作一个包含四个系列的组合图表。 其中两个是线类型,两个是区域类型。 面积图似乎没有阴影(尽管它像面积图一样有一条鼠标悬停在垂直线上)。 我尝试将系列指定为类型阶梯区域,但没有任何变化。 数据是从外部 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°)"
                ],

理想情况下,我希望"峰值"和"最小值"是面积图或阶梯面积。 以下是我所看到的屏幕截图。

[显然我不能发布图片,因为我还没有足够的声誉,但可以在这里找到这个截图的链接:https://drive.google.com/file/d/0B54o6IsW1K9FZlVsanc5RFJXRGM/view?usp=sharing]

如果你有一个JSfiddle,里面有我们可以处理的完整代码,那会更容易一些,但我会试一试。

主要问题是您已将areaOpacity设置为零,这将使您的面积图看起来很像折线图。此外,您想保持系列直截了当,我认为您可能会对哪些选项与哪个系列混淆。

这是一个有效的JS小提琴,它使用您提供的数据将两条线作为阴影区域。关键点是将type更改为areasteppedArea(不是"面积"),并将areaOpacity: 0.5添加到适当的系列中。

http://jsfiddle.net/cqa04mcp/3/