Question

Flot图表api支持双v轴刻度，如this example所示。

我正在使用谷歌图表 - 谷歌也可以这样做吗？我已经查看了示例和文档，但找不到任何示例/引用来表明它支持双轴图表。

Answer 1

我花了一段时间来解决这个问题，但谷歌图表确实支持双Y轴（v轴）。我想使用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＆amp; 2到那个轴，它们在第二轴上正常工作。

Answer 2

非JavaScript解决方案

假设您正在寻找一个共享相同X轴（水平）但Y轴（垂直）具有不同值（和比例）的系列，那么您可以执行以下操作而无需使用JavaScript，如下所示：< / p>

选择插入|菜单中的图表。
双击图表，然后在图表编辑器中选择“图表类型|图表”。折线图。
单击“数据范围”框中的网格图标以打开数据范围对话框。
单击包含您感兴趣的Y轴线数据的工作表，并从左上角到右下角突出显示，以便覆盖所有Y轴线。您可以稍后整理列。
单击“确定”，您将看到已提取系列的集合。对每个系列使用“点菜单”以删除您不感兴趣的系列。
点击“ X轴”框中的网格图标，再次进入“数据范围”对话框。
单击包含您感兴趣的X轴行数据的工作表，并从上至下突出显示。
单击“确定”，您将看到X轴已填充，并且两条Y轴线共享相同的左轴标签。
单击要使用右轴标签的线，然后在图表编辑器对话框中使用“轴”框选择“右轴”。

您现在可以编辑图表的其他各种属性，以使其在呈现方式上看起来像您想要的样子。

Answer 3

我做到了。

点击数据系列
将出现一个小方框，其中包含2个小方块，每个方块只有两个粗体
点击第二个

然后可能会完成。

Google Charts可以支持双y轴（v轴）吗？

3 个答案: