在App Script Web应用程序中绘制和过滤图表

问题描述 投票：0回答：1

我正在尝试在 Web 应用程序 HTML 页面中绘制图表，通过我的应用程序脚本功能从 Google 表格中获取数据。

我的气体代码

// Data For Line Chart

function draw_chart(){
  var ss = SpreadsheetApp.openById('XXXXXXX');
  var metrics_sheet = ss.getSheetByName('data_s');
  var lastrow = metrics_sheet.getLastRow();
  var lastcolumn = metrics_sheet.getLastColumn();
  var values = metrics_sheet.getRange("A1:X").getValues();
  /* Find Last Index of the Non Blank cells */
  const range = metrics_sheet.getRange("A1:X"+lastrow).getValues();
  var index_values  = lastrow - range.reverse().findIndex(c=>c[0]!='');
  var temp = "A1:X"+index_values;
  var values = metrics_sheet.getRange(temp).getValues();
  var pat_data1 = JSON.stringfy(values);
  return pat_data1;  
}

绘制图表功能的示例输出

[["Region","date","volume"],
["All","2024-04-30T18:30:00.000Z",100],
["All","2024-05-30T18:30:00.000Z",403],
["All","2024-06-30T18:30:00.000Z",678],
["All","2024-07-30T18:30:00.000Z",700],

["North","2024-04-30T18:30:00.000Z",90],
["North","2024-05-31T18:30:00.000Z",200],
["North","2024-06-30T18:30:00.000Z",500],
["North","2024-07-31T18:30:00.000Z",300],

["South","2024-04-30T18:30:00.000Z",10],
["South","2024-05-31T18:30:00.000Z",203],
["South","2024-06-30T18:30:00.000Z",178],
["South","2024-07-31T18:30:00.000Z",400]]

在此处加载我所有的库

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
    <script src="https://www.gstatic.com/charts/loader.js"></script>

我知道 arrayToDataTable 接受数组数组，所以我这样做了

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

      function drawchart(){        
        google.script.run.withSuccessHandler(displaychart).draw_linechart();
      }
      function displaychart(c_data1){
        var chartdata =  new google.visualization.arrayToDataTable(JSON.parse(c_data1),false);
        console.log(chartdata);        

      //Setting Chart Options
      var options={
        title: 'Line Chart Example',
        is3D: true
      }
      // Draw chart passing some options
      var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
      chart.draw(chartdata,options);
      }
      </script>

<select id="city">
    <option value="National">National</option>
    <option value="North">North</option>
    <option value="South">South</option>
     </select>
<div id="line_chart" class="line_cont"></div>

我收到错误

给定轴上的所有系列必须具有相同的数据类型

对于上面的错误，我参考了这个答案 Google Chart 给定轴上的所有系列必须具有相同的数据类型混淆错误

我尝试过这个

var data = new google.visualization.DataTable();
        data.addColumn('string','region' );
        data.addColumn('date','date');
        data.addColumn('number','volume');

        var arrMain=[];
        for(i=0;i<c_data1.length;i++){
console.log(c_data1[i].region) // returns undefined
          arrMain.push([c_data1[i].region,new Date(c_data1[i].date),c_data1[i].volume]);
        }

        data.addRows(arrMain);

再次出现相同的错误“给定轴上的所有系列必须具有相同的数据类型”console.log(c_data1[i].region) 返回未定义。 我到底做错了什么？我理解很多反对票，因为缺乏信息，我厌倦了再次传达我的错误。

javascript google-visualization
1个回答
0
投票

修改要点：

  • 在 Javascript 中，在 
    google.script.run.withSuccessHandler(displaychart).draw_linechart();
    处，调用 
    draw_linechart
    。但是，在您的 Google Apps 脚本中，函数名称是 
    draw_chart()
    。这是
    draw_linechart
    吗？
  • 从你更新的问题来看，关于
    All series on a given axis must be of the same data type
    ，当我看到你的
    Sample Output of the draw chart function
    时，“A”、“B”和“C”列分别是字符串、字符串和数字。我认为这就是您当前问题的原因。在这种情况下，数据类型必须相同。但是，我不知道你的预期结果。所以，以下修改只是我的猜测。

我猜你的预期结果如下。

  • 您的数据有 3 列
    "Region","date","volume"
    ，您的 HTML 有一个下拉列表。当您更改下拉列表时，例如选择“南部”，您希望在“区域”中显示包含“南部”数据的图表。当选择“全国”时，您想使用“地区”中“全部”的数据。

如果我对你预期结果的猜测是正确的，那么下面的修改如何？

Google Apps 脚本：

请将函数名称从

draw_chart()
修改为
draw_linechart
。

HTML：

在这种情况下，假设函数 

draw_linechart
工作正常。并且，值 
Sample Output of the draw chart function
正确返回。请注意这一点。

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawchart);

    let obj;

    function drawchart() {
      google.script.run.withSuccessHandler(e => {
        const [[, ...head], ...v] = JSON.parse(e);
        obj = v.reduce((o, [a, b, c]) => (o[a] = o[a] ? [...o[a], [new Date(b), c]] : [head, [new Date(b), c]], o), {});
        displaychart("All");
      }).draw_linechart();
    }

    function displaychart(key) {
      var chartdata = new google.visualization.arrayToDataTable(obj[key], false);
      var options = {
        title: 'Line Chart Example',
        is3D: true
      }
      var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
      chart.draw(chartdata, options);
    }

    function selected(e) {
      displaychart(e.value == "National" ? "All" : e.value);
    }
  </script>

  <select id="city" onchange="selected(this)">
    <option value="National">National</option>
    <option value="North">North</option>
    <option value="South">South</option>
  </select>
  <div id="line_chart" class="line_cont"></div>
</body>

</html>

测试：

当上面修改的 HTML 和 Javascript 与您的值“绘制图表函数的示例输出”一起使用时，将获得以下结果。

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.