在 gVisLineChart 系列之间添加间距

Question

我正在使用 R 中的 Google Vis (gVisLineChart) 制作一个简单的折线图。我有几个系列显示在同一个图表上。他们之间没有关系。

如果我只有两个系列，我会用左边的纵轴表示一个，用右边的纵轴表示另一个。但是，我有 4 个系列。我隐藏了轴（它们对我来说毫无意义），最后我得到了相互交叉的线。这是一个例子：

这是我想要的：

我不是一个很好的艺术家，但正如你所看到的，我想增加系列之间的间距以限制线条交叉。

我已经阅读 Google Vis 的文档数小时并尝试了我能找到的所有选项，但我无法做到。

Answer 1

没有任何配置选项，
但您可以增加显示的值，
所以它们实际上更大，地块更高，
但在工具提示中显示真实值。

工具提示将显示数据中单元格的格式化值table。
我们可以通过几种方式完成。

1)加载数据table，然后使用数据table方法setFormattedValue改变格式化值

2) 使用对象表示法，我们可以提供值 (v:) 和 (f:) 格式化值，
加载数据时 table。

{v: 100, f:'10'}  // <-- will plot 100 but display 10

请参阅以下工作片段，
在这里，我使用数据视图和计算列来更改绘图值，
但在工具提示中显示真实值。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chartData = [
    ['x', 'y0', 'y1', 'y2'],
    [0, 10, 12, 18],
    [2, 16, 18, 19],
    [4, 18, 19, 24],
    [6, 26, 28, 22],
    [8, 13, 15, 21],
    [10, 32, 31, 33]
  ];

  var data = google.visualization.arrayToDataTable(chartData);

  var columns = [0];
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    addColumn(i);
  }

  var view = new google.visualization.DataView(data);
  view.setColumns(columns);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, {
    height: 400,
    vAxis: {
      textPosition: 'none'
    }
  });

  function addColumn(index) {
    columns.push({
      calc: function (dt, row) {
        return {
          v: dt.getValue(row, index) + (index * 20),
          f: dt.getFormattedValue(row, index)
        };
      },
      label: data.getColumnLabel(index),
      type: data.getColumnType(index)
    });
  }
});

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

例如

在 gVisLineChart 系列之间添加间距

Add spacing between gVisLineChart series

r

plot

charts

google-visualization

line-plot