Блог

Главная - Вопросы по программированию - Как создать диаграмму в Google таблицах с помощью javascript?

Как создать диаграмму в Google таблицах с помощью javascript?

#javascript #google-sheets #google-sheets-api

#javascript #google-sheets #google-sheets-api

Вопрос:

Я использую javascript для создания Google-sheets-документа с пользовательскими данными. Документ сохраняется на диске пользователя. Я не могу понять, как составить график из данных, которые я вставил. Я использую ванильный javascript с API Google Sheets. Вероятно, это будет выглядеть примерно так:

   function createGraph() {
  
    gapi.client.sheets.graph
      .create({
        properties: {
          type(?): 'Pie'
          spreadsheetid: //some id
          range: 'A1:A10'
        },
      })
  }

РЕДАКТИРОВАТЬ: чтобы указать, я хочу вставить график в созданный мной документ sheets, а не на веб-сайт.

Ответ №1:

Если вы хотите добавить диаграмму в свою электронную таблицу, вы можете использовать AddChartRequest API Sheets как часть метода spreadsheets.batchUpdate .

Фрагмент кода:

В общих чертах ваш запрос будет выглядеть следующим образом (проверьте ссылку ниже, чтобы подробно описать тело запроса):

 const payload = {
    "requests": [
        {
            "addChart": {
                "chart": {
                    "spec": { // Chart type, range source, etc.
                        "pieChart": { // Pie chart specification
                          // object (PieChartSpec)
                        }
                        // rest of ChartSpec properties
                    },
                    "position": { // Where the chart will be located
                        // object (EmbeddedObjectPosition)
                    }
                }
            }
        }
    ]    
}

const params = {
    spreadsheetId = "YOUR-SPREADSHEET-ID",
    body = payload
}
gapi.client.sheets.spreadsheets.batchUpdate(params);

Визуализация диаграммы в браузерах и мобильных устройствах:

В случае, если вы просто хотите отобразить диаграмму в браузере, но не добавлять ее в электронную таблицу, вам следует использовать диаграммы Google (см., например, Визуализация: круговая диаграмма).

Ссылка:

Ответ №2:

Обратитесь к этому примеру

 <html>
  <head>
    <!--Load the AJAX API-->
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
    <script type="text/javascript">
      var data;
      var chart;

      // Load the Visualization API and the piechart package.
      google.charts.load("current", { packages: ["corechart"] });

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {
        // Create our data table.
        data = new google.visualization.DataTable();
        data.addColumn("string", "Topping");
        data.addColumn("number", "Slices");
        data.addRows([
          ["Mushrooms", 3],
          ["Onions", 1],
          ["Olives", 1],
          ["Zucchini", 1],
          ["Pepperoni", 2]
        ]);

        // Set chart options
        var options = {
          title: "How Much Pizza I Ate Last Night",
          width: 400,
          height: 300
        };

        // Instantiate and draw our chart, passing in some options.
        chart = new google.visualization.PieChart(
          document.getElementById("chart_div")
        );
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div" style="width: 400; height: 300;"></div>
  </body>
</html>

Ссылка с https://developers.google.com/chart/interactive/docs/drawing_charts

Ответ №3:

Я решил это. Спасибо за помощь! Это сработало для меня.

     function createGraphv2(spreadsheetIdGraph, endIndex) {
  var params = {
    // The spreadsheet to apply the updates to.
    spreadsheetId: spreadsheetIdGraph, // TODO: Update placeholder value.
  };

  var batchUpdateSpreadsheetRequestBody = {
    // A list of updates to apply to the spreadsheet.
    // Requests will be applied in the order they are specified.
    // If any request is not valid, no requests will be applied.
    
        requests: [
          {
            addChart: {
              chart: {
                spec: {
                  title: 'Rapport',
                  basicChart: {
                    chartType: 'COLUMN',
                    legendPosition: 'BOTTOM_LEGEND',
                    axis: [
                      //X-AXIS
                      {
                        position: "BOTTOM_AXIS",
                        title: "FORBRUK"
                      },
                      //Y-AXIS
                      {
                        position: "LEFT_AXIS",
                        title: "TID"
                      }

                    ],

                    series: [
                      {
                        series: {
                          sourceRange: {
                            sources: [
                              {
                                sheetId: 0,
                                startRowIndex: 0,
                                endRowIndex: endIndex,
                                startColumnIndex: 5,
                                endColumnIndex: 6,
                              },
                            ],
                          },
                          
                        },
                        targetAxis: "LEFT_AXIS"
                      }
                    ]

                  }
                },
                position : {
                  newSheet : 'True'
                }
              },
             
            }
          }
        ],


    // TODO: Add desired properties to the request body.
  };

  var request = gapi.client.sheets.spreadsheets.batchUpdate(
    params,
    batchUpdateSpreadsheetRequestBody
  );
  request.then(
    function (response) {
      // TODO: Change code below to process the `response` object:
      console.log(response.result);
    },
    function (reason) {
      console.error("error: "   reason.result.error.message);
    }
  );
}