Question

据我所知，谷歌图表不支持从上到下的折线图。我找到了一个解决方法，它完全满足了我们此时的目的，只需通过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

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

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>

谷歌图表多个从上到下的行

1 个答案: