Question

我设法用序列号-1,2,3,4的X轴创建了一个折线图...我想要实现的目标是创建一个时序图，该图可以复制折线的所有内容图表，但X轴是时间序列。

我的折线图的数据源

我根据上述数据源构建的折线图仪表板

我用来构建此仪表板的代码

代码1

function doGet(e) {
  
  return HtmlService
  .createTemplateFromFile("Line Chart multiple Table")
  .evaluate()
  .setTitle("Google Spreadsheet Chart")
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  
}

function getSpreadsheetData() {
  
  var ssID  = "1qkDFf4sYMgPZhGAoEf7vrXbBPmno6Tt4UT_zd5M8xLo";
  var sheet = SpreadsheetApp.openById(ssID).getSheets()[0];
  var firstrow = 6; //11th row
  var range = sheet.getRange(firstrow, 1, sheet.getLastRow() - firstrow + 1, 6);
  var data1 = range.getValues();
  var data2 = sheet.getRange('A1:F5').getValues();
  var data3 = sheet.getRange('H2:M9').getValues();
  
  rows   = {data1: data1, data2: data2, data3: data3};

  return rows;
   
}

代码2

<!DOCTYPE html>
<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>

  <div id="table2"></div>
  <div id="lineoverall"></div><div id="table1"></div> 
  <div id="linechartweekly"></div>
  <div id="table3"></div>
    
  

  <script>
    google.charts.load('current', {'packages':['table']});
    
    google.charts.load('current', {packages: ['corechart', 'line']});
     
    google.charts.setOnLoadCallback(getSpreadsheetData);

    function getSpreadsheetData() {
    google.script.run.withSuccessHandler(drawChart).getSpreadsheetData();
    
    }

    function drawChart(rows) {
    
         
      var data1 = google.visualization.arrayToDataTable(rows.data1, false);
      
      var data2 = google.visualization.arrayToDataTable(rows.data2, false);
      
      var data3 = google.visualization.arrayToDataTable(rows.data3, false);
      
          
      var options1 = {
        title: 'SPC Chart overall',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Yellow', 'blue', 'Yellow', 'Red'],
        pointSize: 3,
              
      };
      
      var options2 = {
        title: 'SPC Chart weekly',
        legend: ['USL', 'UCL', 'Data', 'LCL', 'LSL'],
        colors: ['Red', 'Yellow', 'blue', 'Yellow', 'Red'],
        pointSize: 3,
      };
      
      var table2 = new google.visualization.Table(document.getElementById("table2"));
      table2.draw(data2, {showRowNumber: false, width: '50%', height: '100%'});
      
      var chart1 = new google.visualization.LineChart(document.getElementById("lineoverall"));
      chart1.draw(data1, options1);
      
      var table1 = new google.visualization.Table(document.getElementById("table1"));
      table1.draw(data1, {showRowNumber: false, width: '50%', height: '200'});
         
      var table3 = new google.visualization.Table(document.getElementById("table3"));
      table3.draw(data3, {showRowNumber: false, width: '50%', height: '100%'});
      
      var chart2 = new google.visualization.LineChart(document.getElementById("linechartweekly"));
      chart2.draw(data3, options2);
    
  
    }
  </script>
</body>

</html>

The Time-series Data source I Intend to use to build the Time series chart & Dashboard

[![enter image description here][3]][3]

我尝试使用注释图来开发时间序列图和仪表板。只是用注释图表代码替换了折线图表代码。

已使用

google.charts.load（'current'，{'packages'：['annotationchart']}）;

代替

google.charts.load('current', {packages: ['corechart', 'line']});

并在以后的阶段中使用了这段代码，而不是折线图代码

var chart1 = new google.visualization.AnnotationChart(document.getElementById('lineoverall'));
      
chart1.draw(data1, options);

即使那样也不起作用。我的数据源的日期格式是否有问题？我的数据源格式正确吗？

非常感谢您的帮助。

使用Google应用脚本创建时间趋势图表

0 个答案: