Google Apps 脚本组合条形图/带 2 Y 轴的折线图

Question

我正在 Google Apps 脚本中工作，并尝试创建组合条形图/折线图。

这是我用于生成图表的客户端代码：

    function displayCo2Charts(JSONObj) {
      var retObj = JSON.parse(JSONObj);
      var data = google.visualization.arrayToDataTable(retObj.co2MonthData);

      var options = {
        title : 'CO2 Emissions by Month',
        vAxis: {title: 'Emissions'},
        hAxis: {
          title: 'Month',
          baseline:0,
          minorGridlines:0,
        },
        seriesType: 'bars',
        width:900,
        height: 500,
        series: {
          1: {type: 'line'},
        },
      };

      var chart = new google.visualization.ComboChart(document.getElementById('co2MonthDiv'));
      chart.draw(data, options);
    }

以及正在发送的数据：

co2MonthData = [["Month", "Emissions", "Average"]
, ["2024 Jan", "4.995", "0.208"]
, ["2024 Feb", "7.056", "0.157"]
, ["2024 Mar", "3.268", "0.102"]
, ["2024 Apr", "0.083", "0.028"]
]

这就是我得到的：

那太好了，但平均值与总数相比太小了，所以这里不太清晰。所以现在我需要进行更改，以便平均系列出现在单独的轴上。这是我发现的更新代码，本质上是添加到系列对象指示器，以便系列 1（行）附加到 targetAxisIndex:1。

    function displayCo2Charts(JSONObj) {
      //console.log(JSONObj);
      var retObj = JSON.parse(JSONObj);
      var data = google.visualization.arrayToDataTable(retObj.co2MonthData);

      var options = {
        title : 'CO2 Emissions by Month',
        vAxis: {title: 'Emissions'},
        hAxis: {
          title: 'Month',
          baseline:0,
          minorGridlines:0,
        },
        seriesType: 'bars',
        width:900,
        height: 500,
        series: {
          0: {targetAxisIndex:0},  //this was added
          1: {type: 'line', targetAxisIndex:1},  //this was updated
        },
        vAxes: {  //added at DuuEyn's suggestion, and this set the right title
          1: {
            title:"Average Emissions"
          }
        },
      };

      var chart = new google.visualization.ComboChart(document.getElementById('co2MonthDiv'));
      chart.draw(data, options);
    }

这基本上是有效的，因为这条线现在显然位于不同的轴上，这很棒。但左轴丢失了指示值的数字，右轴上也没有出现值，并且图例从侧面移动到顶部，并丢失了标签。

选项对象中是否有需要正确设置才能获取左轴和右轴上的值的设置？我可以给两个轴赋予不同的标题吗？我尝试向系列对象添加一个 title:'average' 值以防万一，但这不起作用。 （编辑：我添加了 vAxes 块，它确实允许我设置不同的标题。）

Answer 1

解决方法：

我修改了您现有的脚本，并从

vAxis

中删除了

options

，因为它与

vAxes

冲突。我还修改了

vAxes

并为每个系列 0 和 1 添加了标题。

尝试这个代码片段：

google.charts.load('current', {
  callback: function() {
    var co2MonthData = [
      [{
          label: "Month",
          type: "string"
        },
        {
          label: "Emissions",
          type: "number"
        },
        {
          label: "Average",
          type: "number"
        },
      ],
      ["2024 Jan", 4.995, 0.208],
      ["2024 Feb", 7.056, 0.157],
      ["2024 Mar", 3.268, 0.102],
      ["2024 Apr", 0.083, 0.028]
    ];

    var data = new google.visualization.arrayToDataTable(co2MonthData);

    var options = {
      title: 'CO2 Emissions by Month',
      //Removed vAxis as it conflicts with vAxes
      //modified vAxes to add a title for both series 0 and 1
      vAxes: {
        0: {
          title: "Emissions"
        },
        1: {
          title: "Average Emissions"
        }
      },
      hAxis: {
        title: 'Month',
        baseline: 0,
        minorGridlines: 0,
      },
      seriesType: 'bars',
      width: 900,
      height: 500,
      series: {
        0: {
          targetAxisIndex: 0
        },
        1: {
          type: 'line',
          targetAxisIndex: 1
        },
      },
    };

    var chart = new google.visualization.ComboChart(document.getElementById('co2MonthDiv'));
    chart.draw(data, options);
  },
  packages: ['corechart']
});

div {
  height: 100%;
  margin: auto;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="co2MonthDiv"></div>