Переключение осей X и Y на линейной диаграмме Google
На моей оси X указаны IP-адреса (строка), а на оси 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
как вы обнаружили, у вас не может быть строки на оси 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>
@WhiteHat Вот мой класс dto, я получаю список Список данных из базы данных. открытый класс ServerStatusParameters { private String totalPhysicalMemory; частная строка freePhysicalMemory; частное использование памяти; частное двойное использование процессора; частный строковый IP-адрес; }