Question

我想要显示我的图表，但是在垂直方向上不是水平的，如下图所示，并且如果可能的话也会隐藏图例。

提前感谢您的帮助。

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


function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
        [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
        [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
        [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
        [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
        [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
        [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
        [48, 72], [49, 68], [50, 66],
      ]);

      var options = {
        hAxis: {
          textPosition:"none"
        },
        vAxis: {
          textPosition:"none"
        },

      };


      var chart = new google.visualization.LineChart(document.getElementById('chart_div'))

      chart.draw(data, options);
    }

Answer 1

使用图表选项...

orientation: 'vertical'

和......

legend.position: 'none'

请参阅以下工作代码段...

它还演示了增加chartArea的大小以填充容器

默认情况下图表不会执行...

chartArea: {
  top: 6,
  right: 6,
  bottom: 6,
  left: 6,
  height: '100%',
  width: '100%'
},

google.charts.load('current', {
  callback: drawBasic,
  packages:['corechart']
});

function drawBasic() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Y');

  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66],
  ]);

  var options = {
    chartArea: {
      top: 6,
      right: 6,
      bottom: 6,
      left: 6,
      height: '100%',
      width: '100%'
    },
    hAxis: {
      textPosition: 'none'
    },
    height: 800,
    legend: {
      position: 'none'
    },
    orientation: 'vertical',
    vAxis: {
      textPosition: 'none'
    },
    width: 200
  };

  var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0'));
  chart0.draw(data, options);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, row) {
      return {
        v: dt.getValue(row, 1) * -1,
        f: dt.getFormattedValue(row, 1),
      };
    },
    label: data.getColumnLabel(1),
    type: data.getColumnType(1)
  }]);

  var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
  chart1.draw(view, options);
}

div {
  display: inline-block;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>

Answer 2

您可以使用css实现此目的（并在选项中添加legend: {position: 'none'}以隐藏图例）

＆＃13;

google.charts.load('current', {packages: ['corechart', 'line']});

google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'X');
  data.addColumn('number', 'Dogs');

  data.addRows([
    [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
    [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
    [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
    [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
    [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
    [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
    [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
    [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
    [48, 72], [49, 68], [50, 66],
  ]);

  var options = {
    hAxis: {
      textPosition:"none"
    },
    vAxis: {
      textPosition:"none"
    },
    legend: {position: 'none'}
  };


  var chart = new google.visualization.LineChart(document.getElementById('chart_div'))

  chart.draw(data, options);
}

＆＃13;

#chart_div{
  transform-origin: 80% 50%;
  transform:rotate(-90deg);
}

＆＃13;

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

＆＃13;

旋转整个Google图表

2 个答案: