Как начать точки по оси Y начинается сверху в диаграммах Google - PullRequest
Новая
       51

Как начать точки по оси Y начинается сверху в диаграммах Google

1 голос
/ 21 марта 2020

Я использую диаграммы Google для своего проекта, и у меня есть требование, чтобы метки и для осей 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>

`

1 Ответ

1 голос
/ 22 марта 2020

есть опция конфигурации оси для: direction

Направление, в котором растут значения вдоль оси. Укажите -1, чтобы изменить порядок значений.

проблема здесь в том, что Материал диаграммы не поддерживают эту опцию,
см. Отслеживание проблемы для материала Диаграмма функций чётности ...

и Класси c диаграммы не имеют возможности представить ось X сверху.

однако мы можем вручную изменить график для события 'ready'.
, чтобы разрешить, мы используем график Classi c и изменим порядок y- метки оси.
, затем вручную переместите метки оси X наверх. 

vAxis: {
  direction: -1
}

но сначала мы должны использовать следующую опцию, чтобы создать комнату сверху. 

chartArea: {
  top: 72
},

мы также должны немного переместить заголовок, чтобы освободить место для ярлыков.

см. Следующий рабочий фрагмент ... 

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>
...