В вызываемой функции для создания линейного графика мне нужно условно изменить ось и ширину линии серии, для которой номер серии может варьироваться.

Вопрос или проблема

Функция будет вызываться из многих других функций. Для цветов серий при отчетах о состояниях (фиксированное число) я использую цвета состояния, которые загружаю из большего массива, который затем обрезаю. При отчетах о школах (относительно фиксированное число) я использую цвета школ. При отчетах о других сущностях я использую соответствующий подмассив. Этот код работает нормально.

Моя задача заключается в том, чтобы, когда последняя строка должна быть выделена как среднее значение или выделена и отображена против правой оси, я выбираю цвет, который хорошо контрастирует с черным фоном, и пытаюсь увеличить ширину линии. Техника, которую я использую, заключается в наличии переменных в .setOption для серий по номеру серии, ширине серии и оси серии. Это, похоже, не работает. Что я делаю не так?

function lineChart1(rowa, cola, rowl, coll, rowo, chtTitle, sheetName, position, suffix, second, groups) {
  /**
   *  @param: rowa - это якорная строка для входного диапазона
   *  @param: cola - это якорный столбец для входного диапазона
   *  @param: rowl - это длина входного диапазона в строках
   *  @param: coll - это длина входного диапазона в столбцах
   *  @param: chtTitle - это заголовок, который будет вставлен в график
   *  @param: sheetName - это имя целевого листа для вывода
   *  @param: position - выбирает, помещается ли график в первый, 
   *          второй или третий столбец (столбец, определенный в свойствах скрипта)
   *  @param: suffix - true/false указывает, должна ли быть выделена последняя строка  
   *  @param: second - true/false указывает, должна ли последняя серия быть сопоставлена 
   *          с второй осью и выделена */

  /**  Определите текущую электронную таблицу и имя листа для размещения графика */
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sh = ss.getSheetByName(sheetName);

  /** Получите параметры графика по умолчанию из свойств скрипта */
  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'));

  /** Проверьте, содержит ли ячейка якоря идентификатор графика предыдущего графика 
   *  Если да, удалите его по этому ID, иначе */
  var chtSheet = ss.getSheetByName(sheetName);
  var rng = chtSheet.getRange(rowo, outputColumn);
  var oldID = rng.getValue();
  if (oldID !== '' && oldID !== null) {
    deleteChartById(oldID, sheetName);
  }

  /** Установите цвета по умолчанию для серий */
   /** Получите корпоративные цвета, если это группа; в противном случае получите цвета
    * первые 5 цветов соответствуют цветам состояния */
  var seriesColoursArray = [];
  if (groups) { var seriesColoursArray = getSelectedGroupColours(); }
  else { var seriesColoursArray = getSeriesColours(); }

  /** Условно захватите цвета для левой оси */
  var seriesColours = [];

  /** Определите, сколько серий для левой оси */
  /** Вычтите один для заголовка, еще один, если указан суффикс или второй */
  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);
  }

  /** Добавьте еще один цвет, если есть суффикс или правая ось 
   *  и установите seriesWidth для суффикса или вторичной серии */
  if (suffix || second) {
    seriesColours.push('#ff00ff');
    var seriesWidth = 4;
  }
  else {
    var seriesWidth = 2;
  }

  /** Установите переменную для оси для последней серии  */
  if (second) { var axisNum = 1 } else { var axisNum = 0 };

  /** Установите переменную номера серии для последней серии */
  var seriesNum = seriesColours.length - 1;

  /** Установите позицию графика */
  switch (position) {
    case null:
      outputColumn = column1Chart
      break;
    case 1:
      outputColumn = column1Chart
      break;
    case 2:
      outputColumn = column2Chart
      break;
    case 3:
      outputColumn = column3Chart
      break;
    default:
      outputColumn = column1Chart
  }

  /** Установите цвет по умолчанию для элементов графика */
  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];

  /** --------------------------------------------------------------
   * Выберите входные данные для построения графика
   * --------------------------------------------------------------*/
  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)    /** Первая строка содержит заголовки */
    .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) /** Получите метки из первого столбца */
    .setCurveStyle(Charts.CurveStyle.SMOOTH)
    .setOption('series', { seriesNum: { textStyle: { color: chartTextColour, fontName: 'Arial', fontSize: 12, visibleInLegend: true }, lineWidth: seriesWidth, targetAxisIndex: axisNum } })
    .setOption('vAxes', {
      0: { textStyle: { color: chartTextColour, fontName: 'Arial', fontSize: 12 }, gridlines: { count: -1, color: chartGridColour, lineDashStyle: [4, 4] } },
      1: { textStyle: { color: 'white', fontName: 'Arial', fontSize: 12 } }
    })
    .setOption('vAxis', { textStyle: { color: chartTextColour, fontSize: 12 } })
    .setOption('width', chartWidth)
    .setOption('height', chartHeight)
    .build();

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

  /** Сохраните идентификатор графика на случай, если мы захотим его затем удалить или изменить  */
  var rng = chtSheet.getRange(rowo, outputColumn);
  rng.setValue(newID);

};

function deleteChartById(id, sheetName) {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var chtSheet = ss.getSheetByName(sheetName);
  const chart = chtSheet.getCharts().find(chart => chart.getChartId() === +id);
  if (!chart) {
    throw new Error('График с ID ' + id + ' не найден.');
  } else {
    chtSheet.removeChart(chart);
  }
}type here

Я ожидал, что когда либо суффикс, либо второй были истинны, ширина линии будет 4, а если второй будет истинным, серия будет сопоставлена с правой осью.

Ответ или решение

Чтобы решить проблему, описанную вами в контексте функции создания линейного графика с использованием Google Apps Script, необходимо обратить внимание на правильность применения переменных, задающих параметры для рисования графиков, таких как ширина линий и ось для последней серии данных. Ниже приведены ключевые моменты, которые могут помочь в улучшении вашего кода.

Понимание задачи

Необходимо настроить выделение последней строки, отображение её на вторичной оси и изменение ширины линии в зависимости от ранее определённых условий (suffix и second). Проблема, с которой вы сталкиваетесь, вероятнее всего связана с тем, как вы задаёте параметры для серии данных, а именно серийный номер, ширину линии и ось.

Изменение кода

Обратите внимание на строчку, в которой вы используете .setOption('series', ...). Вместо того чтобы передавать переменную с номером серии в виде строки, вам следует использовать числовое значение, так как это индекс для массива серий. Ниже представлены изменения, которые нужно внести в ваш код:

// Установите набор параметров для последней серии
lineChartBuilder.setOption('series', {
    [seriesNum]: { 
        textStyle: { 
            color: chartTextColour, 
            fontName: 'Arial', 
            fontSize: 12, 
            visibleInLegend: true 
        }, 
        lineWidth: seriesWidth, 
        targetAxisIndex: axisNum 
    }
});

Объяснение изменений

  1. Использование [...] для инициализации объекта: Это позволит динамически задавать ключи в объекте. Вы передаёте индекс seriesNum, который был ранее определён как seriesColours.length - 1, то есть индекс последнего элемента в массиве цветов.

  2. Числовые индексы: Убедитесь, что оба параметра, lineWidth и targetAxisIndex, правильно применяются к текущей серии, заданной именно через числовой индекс.

Потенциальные проблемы

Если изменения не приводят к ожидаемым результатам, рекомендуется удостовериться в следующем:

  • Проверьте, правильно ли инициализируются переменные seriesWidth и axisNum.
  • Убедитесь, что ваши данные подходят под условия, чтобы suffix или second были оценены как true.
  • Проверьте, нет ли конфликтов в других частях кода — иногда другие опции могут перезаписывать настройки.

Заключение

Следуя вышеописанным рекомендациям, вы сможете правильно настроить линейный график и динамически изменять параметры для последней серии данных. Это улучшит визуализацию данных и обеспечит лучшую читаемость графиков. Если возникнут дополнительные вопросы, не стесняйтесь обращать на них внимание, чтобы внести дальнейшие улучшения.

Оцените материал
Добавить комментарий

Капча загружается...