jquery - 如何在谷歌图表中绘制两个 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}
    ],} );

}​