Изменение порядка меток данных в линейных диаграммах Google - PullRequest
Новая
       15

Изменение порядка меток данных в линейных диаграммах Google

1 голос
/ 09 апреля 2019

У меня есть линейная диаграмма вдоль линий ниже, и я хочу иметь возможность установить, какая метка находится сверху.(В этом примере хотелось бы, чтобы «собаки» были на вершине.)

Я понимаю, что мог бы сделать это вручную - просто переключая порядок столбцов - но на практике я имею дело с большими наборами данныхи очень предпочел бы просто иметь возможность указать порядок, в котором метки должны отображаться на оси, не переставляя сами столбцы.

Есть ли способ сделать это?Я не смог найти его в документации.

Пример кода: https://www.w3schools.com/code/tryit.asp?filename=G2W868VK63KD

    <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable
            ([['X','dogs', 'cats'],
              [0, 1, 9],
              [1, 2, 7],
              [2, 3, 6],
              [3, 3, 9],
        ]);

        var options = {
          series: {
            0: { color: '#e2431e' },
            1: { color: '#e7711b' },
            2: { color: '#f1ca3a' },
            3: { color: '#6f9654' },
            4: { color: '#1c91c0' },
            5: { color: '#43459d' },
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

1 Ответ

1 голос
/ 09 апреля 2019

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

класс DataView имеет метод для setColumns,
, который принимает массив индексов столбцов.

view.setColumns([0, 2, 1, 4, 3]);

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

см. Следующий рабочий фрагмент,
здесь, массив columnOrder используется для указания порядка столбцов ... 

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['X', 'cats', 'dogs', 'birds', 'reptiles', 'fish', 'rodents'],
    [0, 1, 9, 5, 8, 3, 2],
    [1, 2, 7, 3, 9, 4, 3],
    [2, 3, 6, 2, 10, 5, 4],
    [3, 3, 9, 5, 11, 6, 5],
  ]);

  // specify order
  var columnOrder = [
    'dogs',
    'birds',
    'cats',
    'fish',
    'rodents',
    'reptiles',
  ];

  // build data view columns
  var viewColumns = [0];
  columnOrder.forEach(function (label) {
    for (var i = 1; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnLabel(i) === label) {
        viewColumns.push(i);
      }
    }
  });

  // build data view
  var view = new google.visualization.DataView(data);
  view.setColumns(viewColumns);

  var options = {
    height: 400,
    series: {
      0: { color: '#e2431e' },
      1: { color: '#e7711b' },
      2: { color: '#f1ca3a' },
      3: { color: '#6f9654' },
      4: { color: '#1c91c0' },
      5: { color: '#43459d' },
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, options);  // use view to draw chart
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...