如何在谷歌图表中从顶部开始 y 轴点答案

【问题标题】：How to start y-axis points starts from top in google charts如何在谷歌图表中从顶部开始 y 轴点
【发布时间】：2020-03-21 06:05:48
【问题描述】：

我在我的项目中使用谷歌图表，我需要一个图表，x 轴和 y 轴标签都应该从上到下开始，所以在下面的代码中，x 轴点被移动到顶部，并且现在我也想从上到下而不是从下到上开始 Y 轴点。这里我写了下面的代码，谁能帮帮我们。

<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  1, 80.8, 41.8],
        [2,  1, 69.5, 32.4],
        [3,  1,   57, 25.7],
        [4,  1, 18.8, 10.5],
        [5,  1, 17.6, 10.4],
        [6,   1, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          },
          y: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

有一个轴配置选项：direction

值沿轴增长的方向。指定 -1 以反转值的顺序。

这里的问题是 Material 图表不支持此选项，
见Tracking Issue for Material Chart Feature Parity...

和经典图表没有在顶部显示 x 轴的选项。

但是，我们可以手动修改 'ready' 事件上的图表。
为了解决这个问题，我们使用 Classic 图表，并颠倒 y 轴标签的顺序。
然后手动将 x 轴标签移动到顶部。

vAxis: {
  direction: -1
}

但首先，我们必须使用以下选项在顶部创建空间。

chartArea: {
  top: 72
},

我们还必须将标题稍微上移，为标签腾出空间。

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');
  data.addRows([
    [1,  1, 80.8, 41.8],
    [2,  1, 69.5, 32.4],
    [3,  1,   57, 25.7],
    [4,  1, 18.8, 10.5],
    [5,  1, 17.6, 10.4],
    [6,   1, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    title: 'Box Office Earnings in First Two Weeks of Opening\nin millions of dollars (USD)',
    width: 900,
    height: 500,
    chartArea: {
      top: 72
    },
    vAxis: {
      direction: -1
    }
  };

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

  google.visualization.events.addListener(chart, 'ready', function () {
    var chartLayout = chart.getChartLayoutInterface();
    var chartBounds = chartLayout.getChartAreaBoundingBox();
    var labels = chart.getContainer().getElementsByTagName('text');
    var fontSize;
    var yCoord;
    Array.prototype.forEach.call(labels, function(label) {
      fontSize = parseFloat(label.getAttribute('font-size'));
      switch (label.getAttribute('text-anchor')) {
        // chart title
        case 'start':
          yCoord = parseFloat(label.getAttribute('y'));
          label.setAttribute('y', yCoord - fontSize);
          break;

        // x-axis labels
        case 'middle':
          label.setAttribute('y', chartBounds.top - (fontSize / 2));
          break;

        // y-axis labels
        default:
          // ignore
      }
    });
  });

  chart.draw(data, options);
});

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

【讨论】：