Charts 如何使用google developer图表向组合图(直线和条形图)添加垂直条带

Charts 如何使用google developer图表向组合图(直线和条形图)添加垂直条带,charts,google-visualization,google-developer-tools,Charts,Google Visualization,Google Developer Tools,我必须创建一个折线图,背景中有垂直条带,在指定位置有一条垂直线。下面是一个图表示例图像。 我试图创建一个组合图,以线条和条形作为我的系列,以获得蓝线和红色垂直线。但是我不知道如何得到垂直带。组合图不支持直方图。没有选项可以创建每个条形图宽度可变的条形图。以下是我到目前为止能够创建的内容: 以下是我的代码: function drawChart() { // Some raw data (not necessarily accurate) var data = google

我必须创建一个折线图,背景中有垂直条带,在指定位置有一条垂直线。下面是一个图表示例图像。

我试图创建一个组合图,以线条和条形作为我的系列,以获得蓝线和红色垂直线。但是我不知道如何得到垂直带。组合图不支持直方图。没有选项可以创建每个条形图宽度可变的条形图。以下是我到目前为止能够创建的内容:

以下是我的代码:

  function drawChart() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
      ['Percentile', 'Number of students', 'Vertical lines',{ role: 'style' }],
      [1,  0.2020202,,''],
      [3,  0.546875,,''],
      [10,  1.20967742,,''],
      [25,  1.87969925,,''],
      [50,  1.953125, ,''],
      [75,  1.32743363,,''],
      [90,  0.64814815, ,''],
      [97,  0.25316456, ,''],
      [99,  0.00621891,,''],
      [78,  ,20,'stroke-width: 2; fill-color: red']

    ]);

    var options = {
      vAxis: {
          gridlines:{count: 6},
          viewWindow:{ max: 2.5}
         },
      hAxis: { 
        ticks: [0,20,40,60,80,100,120]
        },
      seriesType: 'line',
      series: {1: {type: 'bars'}},
      bar:{groupWidth:2},
      intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
      curveType: 'function',
      legend: { position: 'none' },
    };

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.ComboChart(document.getElementById('curve_chart'));
    chart.draw(data, options);
  }
</script>
函数绘图图(){
//一些原始数据(不一定准确)
var data=google.visualization.arrayToDataTable([
[‘百分位’、‘学生人数’、‘垂直线’、{role:‘style'}],
[1,  0.2020202,,''],
[3,  0.546875,,''],
[10,  1.20967742,,''],
[25,  1.87969925,,''],
[50,  1.953125,''],
[75,  1.32743363,,''],
[90,  0.64814815,''],
[97,  0.25316456,''],
[99,  0.00621891,,''],
[78,20,'笔划宽度:2;填充颜色:红色']
]);
变量选项={
言辞:{
网格线:{count:6},
视图窗口:{max:2.5}
},
哈克斯:{
滴答声:[0,20,40,60,80100120]
},
序列类型:“行”,
系列:{1:{type:'bar'}},
条:{groupWidth:2},
间隔:{'lineWidth':2,'barWidth':0.5,样式:'box'},
curveType:'函数',
图例:{位置:'无'},
};
//实例化并绘制图表,传入一些选项。
var chart=newgoogle.visualization.ComboChart(document.getElementById('curve_chart');
图表绘制(数据、选项);
}

请建议如何实现这些垂直条带?

对于条带,不要尝试使条带大小不同——可以添加许多条带,每个轴单位一条,然后为条带的宽度使用相同的颜色。。。?