谷歌可视化面积图没有阴影
Google Visualization Area Chart not Shaded
我正在使用谷歌图表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
更改为area
或steppedArea
(不是"面积"),并将areaOpacity: 0.5
添加到适当的系列中。
http://jsfiddle.net/cqa04mcp/3/
相关文章:
- 在画布上绘制d3形状的面积图
- 当我在同一页上有两个图D3.js时,宽度异常
- 面积图的条件填充 D3.js
- Dygraph-是否可以创建面积图
- 谷歌可视化面积图没有阴影
- 填充堆积面积图将反转 d3
- 具有 D3.js 的多个面积图
- 有一些条形图不是高图表上的 url 链接
- D3.js 折线和面积图 - 想要添加一条由两点定义并表示阈值/最小值的额外线(以便于查看)
- D3.js面积图 - JSON 数据未绑定到图表
- D3面积图能量示例
- 如何将“平均”线添加到 nvd3.js堆积面积图
- Google 可视化堆积面积图:将总计添加到工具提示
- 高图 - 如何在面积图中显示线条边框
- 使用javascriptRRD库绘制面积图
- *Highcharts*去掉百分比面积图中的颜色
- Highcharts:connectNulls==falsedons'不适用于堆叠面积图
- Javascript Three.JS阴影贴图不工作
- 有没有办法绕过'setData'在海图的面积图上
- 有没有一种简单的方法可以把这个D3多线图变成面积图