在 gVisLineChart 系列之间添加间距答案

【问题标题】：Add spacing between gVisLineChart series在 gVisLineChart 系列之间添加间距
【发布时间】：2020-04-10 05:27:36
【问题描述】：

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

如果我只有两个系列，我会用左边的垂直轴来做一个，用右边的一个来做另一个。但是，我有4个系列。我隐藏了轴（在我的情况下它们没有意义），最后我的线条相互交叉。这是一个例子：

这是我想要的：

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

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

【问题讨论】：

标签： r plot charts google-visualization line-plot

【解决方案1】：

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

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

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

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

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

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

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>

例如

【讨论】：