如何在谷歌图表中绘制两个y轴线图

Question

我被指派创建一个谷歌图表，我必须实现一个两个y轴线图。虽然，谷歌只有单y轴图表的教程。如何使用谷歌图表实现两个y轴线图。我正在使用ajax响应来获取相关数据！如果任何人可以帮助我获得一个好的教程或示例代码，那将非常感激。

我已经创建了一个示例图表来了解我正在尝试做什么。

谢谢。

Answer 1

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

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {vAxes:[
      {title: 'Title 1', titleTextStyle: {color: '#FF0000'}, maxValue: 10}, // Left axis
      {title: 'Title 2', titleTextStyle: {color: '#FF0000'}, maxValue: 20} // Right axis
    ],series:[
                {targetAxisIndex:1},
                {targetAxisIndex:0}
    ],} );

}​