在 Google 折线图上切换 X 和 Y 轴答案

【问题标题】：Switching X and Y axis around on Google Line chart在 Google 折线图上切换 X 和 Y 轴
【发布时间】：2019-05-30 14:04:27
【问题描述】：

在我的 X 轴上是 IP 地址（字符串），我的 Y 轴是百分比（数字），但是我想切换它们，当我尝试在我的代码上执行此操作时，我得到“给定的所有系列轴必须是相同的数据类型”错误。我认为这是因为它不允许第一列是数字。

切换 addColumn/addRow 语句以从数字开始（内存使用和 CPU 使用）并以服务器 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]);
            }

Y 轴上的 IP 地址和 X 轴上的百分比。

【问题讨论】：

@WhiteHat 这是我的 dto 类，我从数据库中检索数据列表。公共类 ServerStatusParameters { 私有字符串 totalPhysicalMemory;私有字符串freePhysicalMemory；私有 int 内存使用；私人双CPU使用；私有字符串 ipAddress; }

标签： charts google-visualization

【解决方案1】：

正如您所发现的，折线图的 y 轴上不能有字符串。
具体见data format...

但是，我们可以使用对象表示法用数字表示 IP 地址。
然后显示地址而不是数字。

在谷歌的数据表中加载单元格时，
我们可以提供一个内在价值，比如 --> '127.0.0.1'

或者我们可以使用一个对象，并提供值 (v:) 和格式化值 (f:)
{v: 0, f: '127.0.0.1'}

这将导致图表使用零作为值，但在图表上显示地址。
通过加载数据表中的数据，这解决了我们一半的问题。

现在我们必须解决实际显示在 y 轴上的标签的问题。
在这里，我们可以使用ticks 选项。
ticks 选项将接受上述相同的对象表示法。
所以如果我们想要 y 轴上的 IP 地址，请提供 ticks 如下...

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

请参阅下面的工作 sn-p 示例...

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>

【讨论】：