Any way to customize a Google chart with app scrip

问题:

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

回答1:

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.