- Вы хотите создать диаграмму с возможностью нажатия на нее с помощью службы диаграмм и поместить ее в электронную таблицу.
- Вы хотите добиться этого с помощью скрипта Google Apps.
Я мог бы понять, как указано выше. Если мое понимание верно, как насчет этого ответа? Пожалуйста, подумайте об этом как об одном из нескольких возможных ответов.
В этом ответе я использовал сценарий вашего предыдущего вопроса , немного изменив его. В этом случае в вашем сценарии извлекаются значения из столбца «C2: C», а диаграмма создается с использованием значений и дублированных номеров значений.
Pattern 1:
В этом шаблоне для создания диаграммы с возможностью нажатия кнопки она создается API визуализации Google и помещается в диалоговое окно электронной таблицы.
Использование:
Для запуска сценарий, пожалуйста, запустите функцию openDialog() в редакторе сценариев после того, как скопировали и вставили следующие сценарии. Таким образом, открывается диалоговое окно для электронной таблицы, и диаграмма помещается в диалоговое окно.
В этом примере сценария значения извлекаются из столбца "C" листа const sheetName = "Sheet1" в электронная таблица. Поэтому, пожалуйста, используйте связанный с контейнером скрипт Spreadsheet. Пожалуйста, будьте осторожны.
Пример сценария: Code.gs (сторона сценария Google Apps)
const sheetName = "Sheet1"; // Please set the sheet name.
// Please run this function.
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index').setWidth(650).setHeight(550);
SpreadsheetApp.getUi().showModalDialog(html, "sample");
}
function getValuesFromSpreadsheet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
return sheet.getRange(`C2:C${sheet.getLastRow()}`).getValues()
.reduce((o, [e]) => {
o[e] = e in o ? o[e] + 1 : 1
return o;
}, {});
}
Пример сценария: index.html (сторона HTML & Javascript)
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script>
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
google.script.run.withSuccessHandler(artists => {
var dataArtists = new google.visualization.DataTable();
dataArtists.addColumn('string', 'Artists');
dataArtists.addColumn('number', 'Count');
for(var key in artists) {
dataArtists.addRow([key, artists[key]]);
}
const options = {
title: 'Number of Tracks per Artist',
vAxis: {title: "Artists"},
hAxis: {title: "Number of Tracks"},
width: 600,
height: 500
};
barsVisualization = new google.visualization.BarChart(document.getElementById('chart_div'));
barsVisualization.draw(dataArtists, options);
}).getValuesFromSpreadsheet();
}
</script>
Шаблон 2:
В этом шаблоне диаграмма, созданная с помощью измененного сценария вашего сценария, помещается в электронную таблицу в виде изображения. В этом случае график создается путем запуска функции myFunction, созданной с помощью Charts Service . В этом случае данные извлекаются из активного листа. Пожалуйста, будьте осторожны.
Пример сценария:
function myFunction() {
var app = SpreadsheetApp;
var ss = app.getActiveSpreadsheet();
var sheet = ss.getActiveSheet();
var artistsArray;
var dataArtists;
dataArtists = Charts.newDataTable().addColumn(Charts.ColumnType.STRING, 'Artists').addColumn(Charts.ColumnType.NUMBER, 'Count');
var artists = sheet.getRange(`C2:C${sheet.getLastRow()}`).getValues()
.reduce((o, [e]) => {
o[e] = e in o ? o[e] + 1 : 1
return o;
}, {});
for(var key in artists) {
dataArtists.addRow([key, artists[key]]);
}
dataArtists.build();
var artistsChart = Charts.newBarChart()
.setDataTable(dataArtists)
.setTitle('Number of Tracks per Artist')
.setXAxisTitle('Number of Tracks')
.setYAxisTitle('Artists')
.setDimensions(600, 500)
.build();
sheet.insertImage(artistsChart.getBlob(), 1, 1);
}
Примечание:
- В этом случае, пожалуйста, включите V8 в редакторе сценариев.
Ссылки: