Google 绘制多个自上而下的图表

Question

据我所知 google 图表不支持自上而下的折线图。我找到了一个可以满足我们此时目的的解决方法，只需按 y 坐标而不是 x 坐标的顺序传递数据即可。但是我们现在需要从上到下显示多行，我就是无法让它工作。我最后一次尝试使用 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

i 认为您正在寻找的选项是...

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>

Google 绘制多个自上而下的图表

Google Chart multiple top to bottom Lines

html

javascript

charts

linechart

google-visualization