Вопрос или проблема
Функция будет вызываться из многих других функций. Для цветов серий при отчетах о состояниях (фиксированное число) я использую цвета состояния, которые загружаю из большего массива, который затем обрезаю. При отчетах о школах (относительно фиксированное число) я использую цвета школ. При отчетах о других сущностях я использую соответствующий подмассив. Этот код работает нормально.
Моя задача заключается в том, чтобы, когда последняя строка должна быть выделена как среднее значение или выделена и отображена против правой оси, я выбираю цвет, который хорошо контрастирует с черным фоном, и пытаюсь увеличить ширину линии. Техника, которую я использую, заключается в наличии переменных в .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
}
});
Объяснение изменений
-
Использование
[...]
для инициализации объекта: Это позволит динамически задавать ключи в объекте. Вы передаёте индексseriesNum
, который был ранее определён какseriesColours.length - 1
, то есть индекс последнего элемента в массиве цветов. -
Числовые индексы: Убедитесь, что оба параметра,
lineWidth
иtargetAxisIndex
, правильно применяются к текущей серии, заданной именно через числовой индекс.
Потенциальные проблемы
Если изменения не приводят к ожидаемым результатам, рекомендуется удостовериться в следующем:
- Проверьте, правильно ли инициализируются переменные
seriesWidth
иaxisNum
. - Убедитесь, что ваши данные подходят под условия, чтобы
suffix
илиsecond
были оценены какtrue
. - Проверьте, нет ли конфликтов в других частях кода — иногда другие опции могут перезаписывать настройки.
Заключение
Следуя вышеописанным рекомендациям, вы сможете правильно настроить линейный график и динамически изменять параметры для последней серии данных. Это улучшит визуализацию данных и обеспечит лучшую читаемость графиков. Если возникнут дополнительные вопросы, не стесняйтесь обращать на них внимание, чтобы внести дальнейшие улучшения.