Переключение осей X и Y на графике Google Line - PullRequest
Новая
       12

Переключение осей X и Y на графике Google Line

1 голос
/ 30 мая 2019

На моей оси X есть ip-адреса (String), а на моей оси Y - проценты (числа), однако я хочу переключить их, и когда я пытаюсь сделать это в своем коде, я получаю «Все серии по заданному ось должна быть одного типа данных "ошибка. Я думаю, это потому, что он не позволяет первому столбцу быть числом.

Переключение операторов addColumn / addRow для начала с чисел (использования памяти и использования ЦП) и окончания с IP-адресом сервера. Использование arrayToDataTable вместо DataTable. 

           /*<![CDATA[*/
            var serverStatuses = /*[[${serverStatuses}]]*/ 'default';
            /*]]>*/
            var performanceData =new google.visualization.DataTable();

            performanceData.addColumn('number', 'CPU Usage');
            performanceData.addColumn('number', 'Memory Usage');
            performanceData.addColumn('string', 'Server IP');

            for (var n = 0; n < serverStatuses.length; n++) {
                performanceData.addRow([serverStatuses[n].memoryUsage,
                    serverStatuses[n].cpuUsage, 
                 serverStatuses[n].ipAddress]);
            }

IP-адреса по оси Y и проценты по оси X.

1 Ответ

0 голосов
/ 31 мая 2019

как вы обнаружили, у вас не может быть строки на оси Y линейной диаграммы.
подробности см. В формате данных ...

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

при загрузке ячейки в таблицу данных Google,
мы можем предоставить внутреннее значение, такое как -> '127.0.0.1'

, или мы можем использовать объект, и предоставить какзначение (v:) и отформатированное значение (f:)
{v: 0, f: '127.0.0.1'}

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

теперь мы должны решить вопрос о метках, фактически отображаемых на оси Y.
здесь мы можем использовать опцию ticks.
опция ticks примет тот же объектобозначения выше.
, поэтому, если мы хотим, чтобы ip-адреса были на оси Y, поставьте ticks следующим образом ... 

[{v: 0, f: '127.0.0.1'}, {v: 0.1, f: '127.0.0.2'}, {v: 0.2, f: '127.0.0.3'}]

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var serverStatuses = [
    {memoryUsage: 0.1, ipAddress: '127.0.0.1'},
    {memoryUsage: 0.3, ipAddress: '127.0.0.2'},
    {memoryUsage: 0.5, ipAddress: '127.0.0.3'},
    {memoryUsage: 0.7, ipAddress: '127.0.0.4'},
    {memoryUsage: 0.9, ipAddress: '127.0.0.5'},
  ];

  var performanceData = new google.visualization.DataTable();
  performanceData.addColumn('number', 'Memory Usage');
  performanceData.addColumn('number', 'Server IP');

  var axisTicks = [];
  serverStatuses.forEach(function (row, index) {
    var address = {
      v: index,
      f: row.ipAddress
    };
    axisTicks.push(address);
    performanceData.addRow([
      row.memoryUsage,
      address
    ]);
  });

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(performanceData, {
    vAxis: {
      ticks: axisTicks
    }
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...