谷歌图表是否支持双y轴（v轴）？

Question

Flot图表API支持双Y轴刻度，就像这个示例展示的那样。

我正在使用Google Charts - 这是否也适用于Google Charts？ 我查看了一些示例和文档，但找不到任何示例/参考说明它是否支持双轴图表。

- Kevin

Answer 1

我花了一些时间才明白，但Google Charts确实支持双Y轴（v-axis）。我想使用Javascript API而不是HTML接口。

此示例可以在此处测试： http://code.google.com/apis/ajax/playground/?type=visualization#line_chart 请用下面的代码替换所有代码，以显示如何具有两个不同的Y轴刻度：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'Cats');
  data.addColumn('number', 'Blanket 1');
  data.addColumn('number', 'Blanket 2');
  data.addRow(["A", 1, 1, 0.5]);
  data.addRow(["B", 2, 0.5, 1]);
  data.addRow(["C", 4, 1, 0.5]);
  data.addRow(["D", 8, 0.5, 1]);
  data.addRow(["E", 7, 1, 0.5]);
  data.addRow(["F", 7, 0.5, 1]);
  data.addRow(["G", 8, 1, 0.5]);
  data.addRow(["H", 4, 0.5, 1]);
  data.addRow(["I", 2, 1, 0.5]);
  data.addRow(["J", 3.5, 0.5, 1]);
  data.addRow(["K", 3, 1, 0.5]);
  data.addRow(["L", 3.5, 0.5, 1]);
  data.addRow(["M", 1, 1, 0.5]);
  data.addRow(["N", 1, 0.5, 1]);


  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function", width: 500, height: 400,
    vAxes: {0: {logScale: false},
            1: {logScale: false, maxValue: 2}},
    series:{
       0:{targetAxisIndex:0},
       1:{targetAxisIndex:1},
       2:{targetAxisIndex:1}}}
          );
}

通过在代码中添加maxValue: 2，并将系列1和2设置为该轴，它们可以在第二轴上正常工作。

- QLeap

---

请注意，上面的示例并未显示两个不同的Y轴比例尺（尽管它说了这样做），这仅是因为第二个vAxis设置为maxValue：10，如果您将两个vAxes设置为不同的maxValue值，则会看到两个不同的比例尺。 - Jamie Kitson

@JamieKitson 这个答案现在已经可以了。应该有人进行了编辑。 - Rene Pot

这个答案可以通过为两个垂直轴添加标题来改进，因为这样做可以满足99%的用户要求，尤其是在添加第二个轴时。 - Alex

它对我有用，谢谢，但我面临的唯一问题是“多个标题”，有没有解决方法？ - Sumeet Gohil

另一个 jsfiddle，其中 Y 轴具有不同的数据格式，一个是数字，另一个是 timeofday http://jsfiddle.net/zb7u9e6L/ - Dan

我无法使 BarChart 上的多个 haxes 显示轴标签，但对于 ColumnChart，可以实现多个 vaxes 标签的显示。 - grasmi

Answer 2

无需JavaScript的解决方案

假设您正在寻找一个系列，它共享相同的X轴（水平），但在Y轴（垂直）上有不同的值（和比例），那么您可以按照以下步骤进行操作，而无需使用JavaScript：

1. 从菜单中选择“插入|图表”。
2. 双击图表，在图表编辑器中选择“图表类型 | 折线图”。
3. 点击“数据范围”框中的网格图标以获取数据范围对话框。
4. 点击包含您感兴趣的Y轴线数据的工作表，并从左上角到右下角突出显示，以涵盖所有Y轴线。您稍后可以整理列。
5. 点击确定，您将看到一组系列已被提取。使用每个系列的“点菜单”删除您不感兴趣的系列。
6. 再次点击“X轴”框中的网格图标以获取数据范围对话框。
7. 点击包含您想要用于X轴线的数据的工作表，并从顶部到底部突出显示。
8. 点击确定，您将看到X轴已填充，两条Y轴线共享同一左侧轴标签。
9. 点击您想要使用右侧轴标签的线，并使用图表编辑器对话框中的“轴”框选择“右侧轴”。

现在，您可以编辑图表的各种其他属性，以使其在演示方面看起来符合您的要求。

- Gary

---

具体来说，该选项位于图表编辑器 -> 自定义 -> 系列 -> 坐标轴。 - Blake

Answer 3

我做到了。

1. 点击数据系列
2. 会出现一个小框，里面有两个只有两条粗线的小正方形
3. 点击第二个

可能就完成了。

- Raffaele Negro

---

你能否举一个具体的例子来解释你的答案？ - m4rtin