Google应用脚本:在电子表格中嵌入两个y轴图表

时间:2015-07-13 11:42:36

标签: google-apps-script google-sheets

如何使用GAS在电子表格中嵌入两个y轴图表?我需要类似this

的内容

这是我的代码:

var range = grafData.getRange(2, 1, 10, 2) 
  var chart = sheetGraf.newChart()
  .setPosition(2, 1, 0, 0)
  .setChartType(Charts.ChartType.COLUMN)
  .addRange(range)
  .setOption('title', 'Sales and Profitability')
  .setOption('series', {0: {axis: 'sales'}, 1: {axis: 'profitability'}})
  .setOption('axes', {y: { sales: {label: 'sales'}, profitability: {side: 'right', label: 'profitability'}}})
  .build();
  sheetGraf.insertChart(chart);

返回的是: Chart

正在正确选择数据源:

Datasource

理想情况下,我有一个组合图表,其盈利能力作为次要轴线,但这是不可能的,对吧?那么,我如何拥有2列和2个y轴?

谢谢。

3 个答案:

答案 0 :(得分:1)

我在这里写了一个例子。您可以通过这样的脚本插入图表。

            function sheetChart(){
              try{
                var sheet = SpreadsheetApp.openById( DriveApp.getFilesByName('testSheet').next().getId() );
                sheet.insertImage(myChart(),1,1 )
              } catch(err){
                Logger.log(err);
              }
            }

            function myChart() {
              try{
              var data = Charts.newDataTable()
                  .addColumn(Charts.ColumnType.STRING, 'Month')
                  .addColumn(Charts.ColumnType.NUMBER, 'In Store')
                  .addColumn(Charts.ColumnType.NUMBER, 'Online')
                  .addRow(['January', 10, 1])
                  .addRow(['February', 12, 1])
                  .addRow(['March', 20, 2])
                  .addRow(['April', 25, 3])
                  .addRow(['May', 30, 4])
                  .build();

              var chart = Charts.newAreaChart()
                  .setDataTable(data)
                  .setStacked()
                  .setRange(0, 40)
                  .setTitle('Sales per Month')
                  .build();
              }catch(err){
                Logger.log(err);
              }
              return chart.getBlob();
            }

从那里,您可以编辑以收集您需要的行和列的值。

答案 1 :(得分:1)

这是您在Google Charts中使用双Y轴的方法:

<html>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
        ['date', 'data1', 'data2', 'percentage'],
         [ "1 Mar", 289,  94, 0.10],  [ "2 Mar", 295,  96, 0.20],  [ "3 Mar", 300, 104, 0.30],
         [ "4 Mar", 306, 124, 0.40],  [ "5 Mar", 311, 142, 0.50],  [ "6 Mar", 317, 153, 0.60],  
         [ "7 Mar", 322, 158, 0.70],  [ "8 Mar", 328, 164, 0.80],  [ "09Mar", 334, 164, 0.90],  
         ["10 Mar", 339, 168, 0.80],  ["11 Mar", 345, 169, 0.70],  ["12 Mar", 351, 180, 0.60],  
         ["13 Mar", 357, 190, 0.50],  ["14 Mar", 363, 200, 0.40],  ["15 Mar", 369, 210, 0.30],  
         ["16 Mar", 375, 220, 0.20],  ["17 Mar", 381, 230, 0.10],  ["18 Mar", 387, 235, 0.00],  
         ["19 Mar", 393, 240, -0.10],  ["20 Mar", 399, 250, -0.20],  ["21 Mar", 406, 245, -0.30],  
         ["22 Mar", 412, 235, -0.40],  ["23 Mar", 418, 235, -0.50],  ["24 Mar", 425, 240, -0.60],  
         ["25 Mar", 431, 245, -0.70],  ["26 Mar", 438, 255, -0.80],  ["27 Mar", 444, 260, -0.90],  
         ["28 Mar", 451, 276, -0.80],  ["29 Mar", 458, 280, -0.70],  ["30 Mar", 464, 295, -0.60], 
         ["31 Mar", 471, 310, -0.50], 
        ]);
        var options = {
          title: 'Leads',
          hAxis: {showTextEvery: 5},
          vAxes: {0: {viewWindowMode:'explicit',
                      viewWindow:{
                                  max:510,
                                  min:82
                                  },
                      gridlines: {color: 'transparent'},
                      },
                  1: {gridlines: {color: 'transparent'},
                      format:"#%"},
                  },
          series: {0: {targetAxisIndex:0},
                   1:{targetAxisIndex:0},
                   2:{targetAxisIndex:1},
                  },
          colors: ["red", "green", "orange"],
          chartArea:{left:100,top:100, width:500, height:150},
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_id'));
        chart.draw(data, options);
      }
</script>

<div id="chart_id" style="width: 800px; height: 300px;"></div>
</html>

这里的工作示例:JSFiddle

答案 2 :(得分:0)

这可能有点晚,但也许对其他人有用,这也是一种解决方法 - 而不是解决方案。

我试图从包含csv文件的文件夹生成一批带有双y图表的电子表格,并遇到同样的问题。

解决方法是创建“模板”电子表格并在UI中手动设置图表,使用样本数据范围设置轴(以及其他任何内容),然后清除图表正在使用的数据。在您的脚本中创建该电子表格的副本并每次粘贴新数据(例如,使用带有数组的.setValues)。每次都会使用正确的双y设置生成图表,并适应不同大小的范围。

例如,像这样创建模板文件的副本,

var targetFolder = DriveApp.getFolderById("<target_folder_id_goes_here>");
var ssTemplate = DriveApp.getFileById("<template_file_id_goes_here>");
var ssFile = ssTemplate.makeCopy("filename", targetFolder);

之后,您始终可以使用chart.modify()

进一步编辑图表

https://developers.google.com/apps-script/reference/spreadsheet/embedded-chart#modify