GAS生成的嵌入图表随机不设置右轴文字颜色

问题描述 投票:0回答:1

function testLineChart() {

  /**  Define current spreadsheet  and name of sheet to contain chart */
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sh = ss.getSheetByName('Sheet1');

  /** Build the vaxes parameters */
  var vAxesOption = {};
  vAxesOption = {
    0:
    {
      textStyle: {
        color: 'white',
        fontName: 'Arial',
        fontSize: 12
      },
      viewWindow: {
        min: 0,
        max: 8000
      },
      baselineColor: 'xffffff'
    },
    1:
    {
      textStyle: {
        color: 'white',
        fontName: 'Arial',
        fontSize: 12
      },
      viewWindow: {
        min: 0,
        max: 20000
      },
      baselineColor: 'xffffff'
    }
  }

  /** --------------------------------------------------------------
   * Select the input data to build the chart
   * --------------------------------------------------------------*/

  var chtRange = sh.getRange(1, 1, 5, 11);
  var lineChartBuilder = sh.newChart().asLineChart();
  var chart = lineChartBuilder
    .addRange(chtRange)
    .setPosition(1, 14, 0, 0)
    .setTransposeRowsAndColumns(true)
    .setOption('series', { 3: { textStyle: { color: "#ff00ff", fontName: 'Arial', fontSize: 12, visibleInLegend: true }, lineWidth: 4, targetAxisIndex: 1 } })
    .setTitle('Title')
    .setOption('titleTextStyle', { color: '#ffff00', fontName: 'Arial', bold: false, fontSize: 16 })
    .setOption('applyAggregateData', 0)
    .setNumHeaders(1)    /** First row contains headers */
    .setOption('chartArea', { backgroundColor: "black" })
    .setOption('legend', { position: 'bottom', textStyle: { color: "white", fontSize: 12 } })
    .setOption('XAxis', { position: 'bottom', textStyle: { color: "white", fontSize: 12 } })
    .setOption('hAxis', { format: "#", textStyle: { color: "white", fontSize: 12 }, gridlines: { count: 0 }, minorGridlines: { count: 0 }, majorGridlines: { count: 0 } })
    .setBackgroundColor("black")
    .setOption('applyAggregateData', 0)
    .setOption("useFirstColumnAsDomain", true) /** Get the the labels from the first column */
    .setCurveStyle(Charts.CurveStyle.SMOOTH)
    .setOption('vAxes', vAxesOption)
    .setOption('width', 700)
    .setOption('height', 400)
    .build();

  sh.insertChart(chart);

};

随机且不一致的嵌入图表不会设置右轴的文本颜色。

enter image description here

预期结果如图所示。右轴颜色设置不一致(即,当我选择其属性时,文本颜色仍设置为自动。我可以手动将其设置为特定颜色。

function lineChart(rowa, cola, rowl, coll, rowo, chtTitle, sheetName, position, suffix, second, groups, min0, max0, min1, max1) {
  /**
   *  @param: rowa is the anchor row for the input range
   *  @param: cola is the anchor column for the input range
   *  @param: rowl is the length of the input range in rows
   *  @param: coll is the length of the input range in columns
   *  @param: chtTitle is the title to be inserted in the chart
   *  @param: sheetName is the name of the target sheet for output
   *  @param: position Selects whether the chart is placed on the first, 
   *          second or third column (column defined in script properties)
   *  @param: suffix true/false indicates if last row should be highlighted  
   *  @param: second true/false specifies if the last series should be mapped 
   *          to the second axis and highlighted 
   *  @param: groups - defined which colour pallete to select
   * */

  /**  Define current spreadsheet  and name of sheet to contain chart */
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sh = ss.getSheetByName(sheetName);

  /** Get default chart attributes from script properties */
  const ps = PropertiesService.getScriptProperties();
  var chartHeight = Number(ps.getProperty('chartHeight'));
  var chartWidth = Number(ps.getProperty('chartWidth'));
  var column1Chart = Number(ps.getProperty('column1Chart'));
  var column2Chart = Number(ps.getProperty('column2Chart'));
  var column3Chart = Number(ps.getProperty('column3Chart'));

  /** If suffix or second specified, add a row */
  if (suffix || second) {
    rowl = rowl + 1;
  }

  if (min0 == undefined) { min0 = '' };
  if (max0 == undefined) { max0 = '' };
  if (min1 == undefined) { min1 = '' };
  if (max1 == undefined) { max1 = '' };

  /** Set the chart position */
  switch (position) {
    case null:
      var outputColumn = column1Chart;
      break;
    case 1:
      var outputColumn = column1Chart;
      break;
    case 2:
      var outputColumn = column2Chart;
      break;
    case 3:
      var outputColumn = column3Chart;
      break;
    default:
      var outputColumn = column1Chart;
      break;
  }

  Logger.log('Line chart is in column ' + columnToLetter(outputColumn));

  /** Check if the anchor cell contains the chart ID of a previous chart 
  *  If so, first delete the chart using that id, otherwise simply create the chart */
  var chtSheet = ss.getSheetByName(sheetName);
  var rng = chtSheet.getRange(rowo, outputColumn);
  var oldID = rng.getValue();
  if (oldID !== '' && oldID !== null) {
    var chartFound = deleteChartById(oldID, sheetName, rowo, outputColumn);
  }

  if (chartFound == false) {
    Logger.log('Chart with id of ' + oldID + ' not found \nLeaving old chart and skipping creation of new chart')
    Browser.msgBox('Chart with id of ' + oldID + ' not found \nLeaving old chart and skipping creation of new chart');
    return;
  }

  /** Setup default colours for series */
  /** Get corporate colours is a group; otherwise get colours
   * with the first 5 colours matching state colours */
  var seriesColoursArray = [];
  if (groups) { var seriesColoursArray = getSelectedGroupColours(); }
  else { var seriesColoursArray = getSeriesColours(); }

  /** Conditionally capture the colours for the left axis */
  var seriesColours = [];

  /** Determine how many series are for left axis */
  /** Subtract one for the header, one more if suffix or second specified */
  if (second !== true && suffix !== true) { var numPrimary = rowl - 1; }
  else { numPrimary = rowl - 2 }

  for (var r = 0; r < numPrimary; r++) {
    if (groups) { var colour = seriesColoursArray[r]; }
    else { var colour = seriesColoursArray[r][0]; }
    seriesColours.push(colour);
  }

  /** Add another colour if there is a suffix or right axis 
   *  and set the seriesWidth for the suffix or secondary series */
  if (suffix || second) {
    seriesColours.push('#ff00ff');
    var seriesWidth = 4;
  }
  else {
    var seriesWidth = 2;
  }

  /** Set the chart element colour defaults */
  var chartElementColours = [];
  var chartElementColours = getChartColours();
  var chartAreaColour = chartElementColours[0][1];
  var chartPlotColour = chartElementColours[0][1];
  var chartTextColour = chartElementColours[2][1];
  var chartGridColour = chartElementColours[4][1];

  /** Set variable for axis for last series  */
  if (second) { var axisNum = 1 } else { var axisNum = 0 };

  /** Set series number variable for last series */
  var seriesNum = seriesColours.length - 1;

  /** Set series number variable for last series */
  if (seriesColours.length > 1) {
    var seriesNum = seriesColours.length - 1;
  }
  else {
    seriesNum = 0;
  }


  /** Build series option for last series */
  var seriesOption = {};
  seriesOption[seriesNum] = {
    textStyle: {
      color: chartTextColour,
      fontName: 'Arial',
      fontSize: 12,
      visibleInLegend: true
    },
    lineWidth: seriesWidth,
    targetAxisIndex: axisNum
  }

  /** Build the left vaxis parameters */
  var vAxesOption = {};
  vAxesOption = {
    0:
    {
      textStyle: {
        color: 'white',
        fontName: 'Arial',
        fontSize: 12
      },
      viewWindow: {
        min: min0,
        max: max0
      },
      baselineColor: 'xffffff'
    },
    1:
    {
      textStyle: {
        color: 'white',
        fontName: 'Arial',
        fontSize: 12
      },
      viewWindow: {
        min: min1,
        max: max1
      },
      baselineColor: 'xffffff'
    }
  }

  // Logger.log('Axes options = ' + JSON.stringify(vAxesOption, null, 2))

  /** --------------------------------------------------------------
   * Select the input data to build the chart
   * --------------------------------------------------------------*/

  var chtRange = sh.getRange(rowa, cola, rowl, coll);
  var lineChartBuilder = sh.newChart().asLineChart();
  var chart = lineChartBuilder
    .addRange(chtRange)
    .setPosition(rowo, outputColumn, 0, 0)
    .setTransposeRowsAndColumns(true)
    .setTitle(chtTitle)
    .setColors(seriesColours)
    .setOption('titleTextStyle', { color: '#ffff00', fontName: 'Arial', bold: false, fontSize: 16 })
    .setOption('applyAggregateData', 0)
    .setNumHeaders(1)    /** First row contains headers */
    .setOption('chartArea', { backgroundColor: chartPlotColour })
    .setOption('legend', { position: 'bottom', textStyle: { color: chartTextColour, fontSize: 12 } })
    .setOption('XAxis', { position: 'bottom', textStyle: { color: chartTextColour, fontSize: 12 } })
    .setOption('hAxis', { format: "#", textStyle: { color: chartTextColour, fontSize: 12 }, gridlines: { count: 0 }, minorGridlines: { count: 0 }, majorGridlines: { count: 0 } })
    .setBackgroundColor(chartAreaColour)
    .setOption('applyAggregateData', 0)
    .setOption("useFirstColumnAsDomain", true) /** Get the the labels from the first column */
    .setCurveStyle(Charts.CurveStyle.SMOOTH)
    .setOption('series', seriesOption)
    .setOption('vAxes', vAxesOption)
    .setOption('width', chartWidth)
    .setOption('height', chartHeight)
    .build();

  sh.insertChart(chart);
  var newID = chart.getChartId();

  /** Store the chart ID in case we want to subsequently delete or modify it  */
  var rng = chtSheet.getRange(rowo, outputColumn);
  rng.setValue(newID);
};

vAxesOption 将颜色定义为白色。

任何有助于解决更好调试问题的帮助将不胜感激。 (这个问题已经重复出现了至少 2-3 年,因此不太可能是最近的代码更改)。

2014 2015 2016 2017 2018 2019 2020 2021 2022 2023
实体1 2,558 2,651 2,712 2,703 2,658 2,571 2,596 2,819 2,886 3,043
实体2 4,420 4,472 4,407 4,673 5,278 5,658 5,954 6,137 6,163 6,324
实体3 2,480 2,218 2,164 2,294 2,580 2,886 3,256 4,123 5,303 5,992
总计 9千 9千 9千 1万 11k 11k 12k 13k 14k 15k
google-sheets google-apps-script charts google-visualization
1个回答
0
投票

您的问题确实可以重现。我没有适合您的解决方案,但这是我迄今为止收集到的信息:

  • 问题确实在于右轴的文本颜色 - 并且只有右轴保持黑色;
  • 添加
     .setYAxisTextStyle(Charts.newTextStyle().setColor('white'))
    并不能解决问题,也不能通过再次重新设置
    .setOption('vAxes', {1: {textStyle: {color: 'white'}}})
    来解决;
  • 通过“剥离”选项仅设置轴的文本颜色并不能解决问题;
  • 问题确实不一致,并且发生频率属于 95% 置信区间
    [0.48, 0.64]
  • 当使用循环生成连续 N 个图时,要么全部都有正确的输出,要么全部出现 bug;
  • 即使在每次迭代之间设置
    Utilities.sleep()
    ,上述观点也适用;
  • 可以通过每分钟为
    testLineChart
    函数设置触发器来复制该问题;
  • 还有关于右轴值的
    viewWindow
    (范围)的第二个不一致:有时会应用指定的设置,其他时候则默认为左轴'
    viewWindow
  • 对于哪些类型的图表出现问题仍需要测试。

关于 vAxis

vAxes
很多
的错误,包括无法通过
EmbeddedChart.getOptions().get('vAxes.1.textStyle.color')
(或任何其他属性)读取它们的属性值,它只返回
null
1

我发现的 Google Issue Tracker 上最接近的现有错误是 this onethis one - 另请参阅他们的评论。您可以给它们加注星标,让 Google 优先考虑它们;或者您可以决定创建一个新的。在后一种情况下,我建议在此处添加链接。


1 请参阅此答案

© www.soinside.com 2019 - 2024. All rights reserved.