Google 未着色的可视化面积图

Question

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

理想情况下，我希望 "Peak" 和 "Min" 是面积图或 stepedArea。下面是我所看到的截图。

[显然我无法 post 图片，因为我还没有足够的声誉，但是可以在此处找到此屏幕截图的 link：https://drive.google.com/file/d/0B54o6IsW1K9FZlVsanc5RFJXRGM/view?usp=sharing]

Answer 1

如果您有一个 JSfiddle 以及我们可以使用的完整代码，那会更容易一些，但我会试一试。

主要问题是您将 areaOpacity 设置为零，这将使您的面积图看起来很像折线图。此外，你想让你的系列保持直截了当，我想你可能会对哪个选项与哪个系列搭配感到困惑。

这是一个有效的 JS fiddle，它使用您提供的数据将两条线作为阴影区域。关键点是将 type 更改为 area 或 steppedArea（而不是 'Area'）并将 areaOpacity: 0.5 添加到适当的系列中。

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

Google 未着色的可视化面积图

Google Visualization Area Chart not Shaded

javascript

charts

json

google-visualization