使用 GoogleVis 折线图的 X 轴小数

Question

我正在尝试使用 R 包 GoogleVis 绘制一个简单的折线图。在我的图中，我的 x 轴是一个 "year" 变量。因此，当我使用年份作为 "double" 绘图时，绘图显示数据中不存在的小数，如下所示：

然后我尝试使用 mutate 并将年份转换为因子。所以，我解决了 "decimals" 问题，但我在图表中有一些空白 =| ，如下：

这是一个可重现的代码：

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 轴上 "decimals" 和 "white spaces"。

提前致谢。弗拉基米尔.

已编辑

注释后的代码： 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]
}

还有一个数据 table 方法可以动态构建这个数组 --> 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>

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

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>

轴上的字符串导致离散轴，
数字连续轴。

discrete 轴不支持 format 和 ticks 选项...

使用 GoogleVis 折线图的 X 轴小数

Decimals in X-axis using GoogleVis line chart

r

linechart

google-visualization

googlevis

dplyr