Question

我正在尝试使用R包GoogleVis绘制简单的折线图。在我的绘图中，我的x轴是一个“年份”变量。因此，当我使用年份作为“双精度”进行绘图时，该绘图将显示数据中不存在的小数，如下所示：

然后，我尝试使用变异和将年份转换为因数。因此，我解决了“小数”问题，但是在图形= |中出现了一些空格。，如下：

这是可复制的代码：

library(dplyr)
library(googleVis)

   # Simple data
   df <- tribble(
     ~year, ~value,
     2014,   15,
     2015,   18,
     2016,   14,
     2017,   25
   )

   # X axis with decimals
   df %>% gvisLineChart() %>% plot()

   # X axis with white spaces
   df %>% mutate(year = as.factor(year)) %>% gvisLineChart() %>% plot()

有人知道如何帮助我吗？我想继续使用相同的包（googleVis），并且在x轴上我既不希望“小数”也不能“空白”。

先谢谢了。 Wlademir。

已编辑

注释后的代码： df %>% gvisLineChart(., options = list(hAxis = "{format: '0', ticks: data.getDistinctValues(0)}")) %>% plot()

Answer 1

要删除小数，请在绘制图表时使用以下配置选项。

hAxis: {
  format: '0'
}

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["year", "value"],
    [2014,  15],
    [2015,  18],
    [2016,  14],
    [2017,  25],
  ]);

  var options = {
    hAxis: {
      format: '0'
    },
    height: 288,
    vAxis: {
      format: '0',
      viewWindow: {
        min: 10,
        max: 30
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

但是，这有时会导致标签重复。
尽管未显示小数位，
图表仍使用-> 2014.0, 2014.5, 2015.0, 2015.5之类的值。
这会导致重复的标签-> 2014, 2014, 2015, 2015

要确保标签不重复，可以使用ticks选项。
ticks是要在轴上使用的值的数组。

hAxis: {
  format: '0',
  ticks: [2014, 2015, 2016, 2017]
}

还有一种数据表方法可以动态构建此数组-> getDistinctValues(columnIndex)

有关示例，请参见以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["year", "value"],
    [2014,  15],
    [2015,  18],
    [2016,  14],
    [2017,  25],
  ]);

  var options = {
    hAxis: {
      format: '0',
      ticks: data.getDistinctValues(0)
    },
    height: 288,
    vAxis: {
      format: '0',
      viewWindow: {
        min: 10,
        max: 30
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意：空格是将年份数字转换为字符串的结果，
如以下代码段所示。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ["year", "value"],
    ['2014',  15],
    ['2015',  18],
    ['2016',  14],
    ['2017',  25],
  ]);

  var options = {
    height: 288,
    vAxis: {
      format: '0',
      viewWindow: {
        min: 10,
        max: 30
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

轴上的

字符串导致离散轴，
为连续轴编号。

离散轴'...

不支持format和ticks选项

使用GoogleVis折线图的X轴小数

1 个答案: