Google 차트 여러 상단에서 하단까지 행

Question

자세히 알아봤을 때 Google 차트는 위에서 아래로의 꺾은 선형 차트를 지원하지 않습니다. 나는이 시점에서 x 좌표가 아닌 y 좌표의 순서로 데이터를 전달함으로써 우리의 목적을 충분히 달성 할 수있는 해결책을 발견했다. 그러나 이제는 위에서 아래로 여러 행을 표시해야하며 작동하도록 설정할 수 없습니다. 내 마지막 시도는 role: domain 속성으로 두 번째 열을 설정했지만 두 번째 줄은 첫 번째 줄 위에 표시됩니다.

여기에 지금까지 시도한 것과의 : 올바른 방향으로

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>

모든 입력/지침도 감사합니다.

Answer 1

난 당신이 찾고있는 옵션 ...

orientation: 'vertical' 

이 작업 조각을 다음을 참조 ...

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>