如何使用应用程序脚本（图表服务）自定义Google图表以使用此非常规电子表格？ [英] Any way to customize a Google chart with app script (charts service) to work with this unconventional spreadsheet?

问题描述

我有学校的老师使用提供的电子表格（下面的链接）来分析他们的评估（项目分析）。我正在创建一个Google网站，试图设置一个应用脚本，使他们能够选择他们想要分析的评估结果，并且网络应用将分析数据并在页面上显示图表。

My问题是...我可以设置一个自定义脚本，从提供的电子表格创建图表吗？它会显示一个条形图 - 问题1 80％，问题2 72％等。你必须真正看到电子表格来理解我的困境。我知道这是一个非常规的数据表（这就是为什么我不能使用提供的图表功能）。但是，我们设置了这种方式，因为我使用IMORTRANGE公式来自动填充学生信息。因此，AVG需要放在标题行中，以确保我可以稍后在管理面板中添加新学生。我是一个具有应用程序脚本功能的初学者，但不知道您是否可以自定义图表使用的数据范围来适应这样的事情。如果这是不可能的，我将不得不看看最终创建新的数据电子表格（比如600个左右）
非常感谢！

Brandon

Ex.Chart - 垂直轴（10％-100％）水平轴 - 问题（1-8）

https://docs.google.com/spreadsheets/d/1MrnkciUE1GT_xuizpcCh-hBsDfysdO5KsqyYYTCECvE/edit?usp =共享

解决方案

以下是< script> 标签，它使用Google可视化文件创建图表。数据是自包含的，所以它不需要任何检索数据。

$ p> < script type =text / javascript>
google.load（visualization，'1'，{packages：['corechart']}）;
google.setOnLoadCallback（drawChart）;

函数drawChart（）{

var data = google.visualization.arrayToDataTable（[
['Element'，'Density'，{role：'style' }]，
['Copper'，8.94，'＃b87333'，]，
['Silver'，10.49，'silver']，
['Gold'，19.30，'gold ']，
['Platinum'，21.45，'color：＃e5e4e2']
]）;

var options = {
title：贵金属密度，单位为g / cm ^ 3，
bar：{groupWidth：'95％'}，
传说：'无'，
};

var chart_div = document.getElementById（'chart_div'）;
var chart = new google.visualization.ColumnChart（chart_div）;

chart.draw（data，options）;
}
< / script>

< div id ='chart_div'>< / div>


Code.gs

 函数doGet（）{
 return HtmlService.createTemplateFromFile（'chart'）
 .evaluate（）
 .setSandboxMode（HtmlService.SandboxMode.NATIVE）; 
} 
  

创建绑定到您网站的应用脚本，然后插入Apps脚本小工具，并链接到Apps脚本的名称。

I have teachers in my school using the provided spreadsheet (link below) to analyze their assessments(item analysis). I am creating a Google site in an attempt to set up an app script that allows them to choose the assessment they would like to analyze and the web app will analyze the data and show charts on the page.
My question is...can I set up a custom script that creates charts from the provided spreadsheet? It would Show a bar graph - question 1 80%, question 2 72% etc. You have to really see the spreadsheet to understand my dilemma. I know that it's an unconventional data sheet(which is why I can't use the provided chart functions). But, we have it set up this way because I use the IMORTRANGE formula to auto populate the students information. Therefore, the AVGs need to be in the header row to ensure that I can add new students later on in the admin panel. I am a functional beginner with app script, but am not sure if you can customize the data ranges that the charts use to fit something like this. If it's not possible, I'll have to look at eventually creating new data spreadsheets (like 600 or so of them :) Thanks a lot!
Brandon

Ex.Chart - Vertical axis (10%-100%) Horizontal Axis - Question (1-8)

https://docs.google.com/spreadsheets/d/1MrnkciUE1GT_xuizpcCh-hBsDfysdO5KsqyYYTCECvE/edit?usp=sharing

解决方案

Here is an example of a <script> tag in an Apps Script HTML App, that creates a chart using Google visualization. The data is self contained, so it will work without any need of retrieving data.

Chart.html

<script type="text/javascript">
    google.load("visualization", '1', {packages:['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Element', 'Density', { role: 'style' }],
        ['Copper', 8.94, '#b87333', ],
        ['Silver', 10.49, 'silver'],
        ['Gold', 19.30, 'gold'],
        ['Platinum', 21.45, 'color: #e5e4e2' ]
      ]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        bar: {groupWidth: '95%'},
        legend: 'none',
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.ColumnChart(chart_div);

      chart.draw(data, options);
  }
</script>

<div id='chart_div'></div>

Code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('chart')
    .evaluate()
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}

Create an Apps Script bound to your site, then Insert an Apps Script Gadget, and link to the name of the Apps Script.

这篇关于如何使用应用程序脚本（图表服务）自定义Google图表以使用此非常规电子表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！