时间戳

首页 > 解决方案 > 在 gVisLineChart 系列之间添加间距

r - 在 gVisLineChart 系列之间添加间距

问题描述

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

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

这是我想要的：

增加间距的 gVisLineChart 的艺术视图

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

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

标签： rplotchartsgoogle-visualizationline-plot

解决方案

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

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

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

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

{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>

例如

推荐阅读