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

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

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

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

Пример кода: 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>

charts google-visualization

09.04.2019 04:59

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

360

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

класс 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>

09.04.2019 13:41

Другие вопросы по теме

Формат даты диаграммы Google невозможно отобразить

Google Location KML показывает странные широты

Как отобразить цвет в сетке области тиков в библиотеке диаграмм Google

Как получить доступ к таблице данных и добавить/удалить строки из диаграммы ВНЕ функции обратного вызова?

Как связать диаграмму временной шкалы с помощью ControlWrapper для фильтрации временной шкалы

Смещение меток делений по центру между делениями на горизонтальной гистограмме

Как установить прозрачность цвета для стран Google Geo Charts без данных?

Высота диаграммы Google в javascript

Невозможно отобразить диаграмму Google

Как построить точечный график и линейный график на одном графике с помощью диаграмм Google

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

Ответы 1

Другие вопросы по теме

Похожие вопросы