Google Charts可以支持双y轴(v轴)吗?

Kev*_*vin 42 charts visualization google-visualization

所述FLOT图表API支持双v轴标度,如由本实施例中.

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

小智 97

我花了一段时间来解决这个问题,但谷歌图表确实支持双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}}}
          );
}
Run Code Online (Sandbox Code Playgroud)

通过添加maxValue: 2代码,并将系列1和2设置到该轴,它们可以在第二个轴上正常工作.

  • 请注意,上面的示例并未显示两个不同的Y轴刻度(尽管说它确实如此),因为第二个vAxis设置为maxValue:10,如果将两个vAx设置为不同的maxValue值,您将看到两个不同的刻度. (2认同)