Google Chart mehrfach von oben nach unten Linien

Question

Soweit ich weiß Google Diagramm unterstützt keine Top-to-Bottom-Liniendiagramme. Ich habe einen Workaround gefunden, der zu diesem Zeitpunkt unseren Zweck erfüllt, indem wir einfach die Daten in der Reihenfolge der y-Koordinate anstatt der x-Koordinate übergeben. Allerdings müssen wir jetzt mehrere Zeilen von oben nach unten anzeigen, und ich kann es einfach nicht zum Laufen bringen. Mein letzter Versuch war das Setzen einer zweiten Spalte mit dem Attribut role: domain, aber die zweite Zeile erscheint nur über der ersten Zeile.

Hier ist mit dem, was ich bisher ausprobiert habe:

google.charts.load('current', {packages: ['corechart', 'line']}); 
 
google.charts.setOnLoadCallback(drawCurveTypes); 
 

 
function drawCurveTypes() { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('number', 'leftRight #1'); 
 
     data.addColumn('number', 'depth #1'); 
 
     data.addColumn({type: 'number', label: 'leftRight #2', role: 'domain'}); 
 
     data.addColumn('number', 'depth #2'); 
 

 
     data.addRows([ 
 
     [-2, 0, 5, 0], [3, -2, 4, -2], [5, -4, 3, -4], [7, -6, 1, -6], [2, -8, 2, -8] 
 
     ]); 
 

 
     var options = { 
 
     hAxis: { 
 
      title: 'Left Right Deformation', 
 
      minValue: -10, 
 
      maxValue: 10 
 
     }, 
 
     vAxis: { 
 
      title: 'Depth', 
 
      viewWindow: { 
 
      min: -8, 
 
      max: 0 
 
      } 
 
     }, 
 
     height: 800, 
 
     width: 300 
 
     }; 
 

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <div id="chart_div"></div>

Alle Eingänge/Führung in die richtige Richtung ist ebenfalls sehr geschätzt.

Answer 1

i denken die Option, die Sie ist auf der Suche sind ...

orientation: 'vertical' 

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Y', 'X1', 'X2'], 
 
    [0, 1, 4], 
 
    [1, 1, 4], 
 
    [2, .5, 3.5], 
 
    [3, .5, 3.5], 
 
    [4, 1, 4], 
 
    [5, 1, 4], 
 
    [6, 1.5, 4.5], 
 
    [7, 1.5, 4.5], 
 
    [8, 1, 4], 
 
    [9, 1, 4] 
 
    ]); 
 

 
    var options = { 
 
    orientation: 'vertical' 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart-container')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart-container"></div>