Wie zeichne ich eine Linie in Google Combo-Diagramm

Question

Ich bin neu in Google-Diagramm. Ich möchte eine rote Linie zeichnen, wie im folgenden Bild gezeigt. Bitte helfen Sie mir, wie das geht.

Ich habe meine Anforderungszeile in obigem Bild zeigen. wie es geht? Bitte hilf mir. Ich habe Combo Chart benutzt. Mein Code wie folgt.

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

Sie haben die richtige Idee mit der bereits grün Linie,
hier sind ein paar Optionen für die rot Linie ...

, um den Anstieg der Linie zu bekommen,
Eine neue Zeile muss zwischen den beiden Punkten hinzugefügt werden.

1. Discrete Achse ('string' Werte) -
   , wenn der mittlere Abschnitt der roten Linie vertikal zu sein braucht,
   dann eine diskrete Achse wird nicht funktionieren.
   Da die hAxis-Ticks nicht gesetzt werden können,
   und es wird eine Lücke für jede Zeile,
   zwingt die Linie zu diagonal.
2. Kontinuierliche Achse ('timeofday' Werte) -
   der mittlere Teil des rot Linie kann vertikal sein,
   weil die hAxis können Zecken festgelegt werden und sich nicht wiederholen.
   jedoch ist eine ColumnChart mit einer kontinuierlichen Achse, ist schwieriger zu formatieren (imo).

siehe folgende, Arbeits Schnipsel ...

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>