Googleのコンボチャートで線を描く方法

Question

Googleの新しいチャートです。次の図のように赤い線を描きたい。 どうすればいいのか教えてください。

上記の画像に私の要件ラインを示しています。 どうすればいいですか？私を助けてください。私はコンボチャートを使用しました。 私のコードは以下の通りです。

function drawVisualization() { 
    // Some raw data (not necessarily accurate) 
    var data = google.visualization.arrayToDataTable([ 
      [ 'Time', 'Col1',{ role: 'style' }, 'col2'], 
      [ '09:50', 1000,'color: #B0C4DE', null], 
      [ '10:00', 1200, 'color: #EEE8AA',1400], 
      [ '10:30', 1500, 'color: #EEE8AA',1400], 
      [ '11:00', 1300, 'color: #B0C4DE',null], 
      [ '11:30', 1200, 'color: #B0C4DE',null], 
      [ '12:00', 1300, 'color: #B0C4DE',null], 
      [ '12:30', 1200, 'color: #EEE8AA',1200], 
      [ '01:00', 1300, 'color: #EEE8AA',1200], 
      [ '01:30', 1600, 'color: #B0C4DE',null]]); 

    var options = { 
     width : 1001, 
     height : 500, 
     vAxis : { 
      format : '#[kw]', 
      viewWindowMode:'explicit', 
      viewWindow: { 
       max:3000, 
       min:0 
      }, 
      ticks: [0, 1000, 2000, 3000] 
     }, 

     seriesType : "bars", 
     series : { 
      1 : { 
       type : "line" 
      } 
     }, 
     legend : { 
      position : 'none' 
     }, 
     colors : ['#ff0000','#008000'] 
    }; 

    var chart = new google.visualization.ComboChart(document 
      .getElementById('number_format_chart')); 
    chart.draw(data, options); 
} 

Answer 1

すでに緑ラインと正しい考えを持って、ここ
は、ラインの上昇を得るために赤行...

のためのカップルのオプションがあり、
2つのポイント間に新しい行を追加する必要があります。

1. ディスクリート軸（'string'値） -
   赤ラインの中央部分が垂直である必要がある場合に、
   次いで離散軸が動作しません。
   
   があり、行ごとにギャップがあり、
   行を斜めにする必要があるため、hAxisティックを設定できないためです。
2. 連続軸（'timeofday'値） -
   赤ラインの中央部分が垂直であることができる、
   hAxisティックを設定することができ、繰り返さないからです。
   ただし、連続軸のあるColumnChartは、フォーマットするのが難しい（imo）。

は

google.charts.load('current', { 
 
    callback: function() { 
 
    var seriesOptions = { 
 
     type : "line" 
 
    }; 
 

 
    new google.visualization.ComboChart(document.getElementById('chart_div0')). 
 
    draw(
 
     google.visualization.arrayToDataTable([ 
 
     [ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'], 
 
     [ '09:50', 1000, 'color: #B0C4DE', null, null], 
 
     [ '10:00', 1200, 'color: #EEE8AA', 1400, 1600], 
 
     [ null, null, 'color: #EEE8AA', 1400, 1600], 
 
     [ null, null, 'color: #EEE8AA', 1400, 1700], 
 
     [ '10:30', 1500, 'color: #EEE8AA', 1400, 1700], 
 
     [ '11:00', 1300, 'color: #B0C4DE', null, null], 
 
     [ '11:30', 1200, 'color: #B0C4DE', null, null], 
 
     [ '12:00', 1300, 'color: #B0C4DE', null, null], 
 
     [ '12:30', 1200, 'color: #EEE8AA', 1200, 1400], 
 
     [ null, null, 'color: #B0C4DE', 1200, 1400], 
 
     [ null, null, 'color: #B0C4DE', 1200, 1500], 
 
     [ '01:00', 1300, 'color: #EEE8AA', 1200, 1500], 
 
     [ '01:30', 1600, 'color: #B0C4DE', null, null] 
 
     ]), 
 
     { 
 
     width : 1001, 
 
     height : 500, 
 
     vAxis : { 
 
      format : '#[kw]', 
 
      viewWindowMode:'explicit', 
 
      viewWindow: { 
 
      max:3000, 
 
      min:0 
 
      }, 
 
      ticks: [0, 1000, 2000, 3000] 
 
     }, 
 
     seriesType : "bars", 
 
     series : { 
 
      1 : seriesOptions, 
 
      2 : seriesOptions 
 
     }, 
 
     legend : { 
 
      position : 'none' 
 
     }, 
 
     colors : ['transparent', '#008000', '#ff0000'] 
 
     } 
 
    ); 
 

 
    new google.visualization.ComboChart(document.getElementById('chart_div1')). 
 
    draw(
 
     google.visualization.arrayToDataTable([ 
 
     [ 'Time', 'Col1', { role: 'style' }, 'Col2', 'Col3'], 
 
     [ [09,50,00], 1000, 'color: #B0C4DE', null, null], 
 
     [ [10,00,00], 1200, 'color: #EEE8AA', 1400, 1600], 
 
     [ [10,15,00], null, 'color: #EEE8AA', 1400, 1600], 
 
     [ [10,15,00], null, 'color: #EEE8AA', 1400, 1700], 
 
     [ [10,30,00], 1500, 'color: #EEE8AA', 1400, 1700], 
 
     [ [11,00,00], 1300, 'color: #B0C4DE', null, null], 
 
     [ [11,30,00], 1200, 'color: #B0C4DE', null, null], 
 
     [ [12,00,00], 1300, 'color: #B0C4DE', null, null], 
 
     [ [12,30,00], 1200, 'color: #EEE8AA', 1200, 1400], 
 
     [ [12,45,00], null, 'color: #EEE8AA', 1200, 1400], 
 
     [ [12,45,00], null, 'color: #EEE8AA', 1200, 1500], 
 
     [ [13,00,00], 1300, 'color: #EEE8AA', 1200, 1500], 
 
     [ [13,30,00], 1600, 'color: #B0C4DE', null, null] 
 
     ]), 
 
     { 
 
     bar: { 
 
      gap: 10 
 
     }, 
 
     width : 1001, 
 
     height : 500, 
 
     hAxis : { 
 
      ticks: [[09,30,00], [09,50,00], [10,00,00], [10,30,00], [11,00,00], [11,30,00], [12,00,00], [12,30,00], [13,00,00], [13,30,00], [14,00,00]] 
 
     }, 
 
     vAxis : { 
 
      format : '#[kw]', 
 
      viewWindowMode:'explicit', 
 
      viewWindow: { 
 
      max:3000, 
 
      min:0 
 
      }, 
 
      ticks: [0, 1000, 2000, 3000] 
 
     }, 
 
     seriesType : "bars", 
 
     series : { 
 
      1 : seriesOptions, 
 
      2 : seriesOptions 
 
     }, 
 
     legend : { 
 
      position : 'none' 
 
     }, 
 
     colors : ['transparent', '#008000', '#ff0000'] 
 
     } 
 
    ); 
 
    }, 
 
    packages: ['corechart'] 
 
});

div { 
 
    text-align: center; 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>Discrete Axis</div> 
 
<div id="chart_div0"></div> 
 
<div>Continuous Axis</div> 
 
<div id="chart_div1"></div>