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

【问题标题】：How to draw a two y axis line chart in google charts如何在谷歌图表中绘制两个 y 轴折线图
【发布时间】：2020-02-13 23:31:05
【问题描述】：

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

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

谢谢。

【问题讨论】：

标签： jquery google-visualization

【解决方案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}
    ],} );

}

【讨论】：