如何在谷歌日历图表中使用布尔型列

how to use boolean type column in Google calendar charts?

本文关键字：布尔型 谷歌 日历      更新时间：2023-09-26

我想在谷歌的日历类型图表上使用布尔类型（true/false）来描述构建状态（通过或失败）。我正在使用下面的HTML代码。但我收到了一个危险信号，提示我添加2列。有什么建议吗？这个片段可能出了什么问题？

 <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'boolean',id :'pass/fail', role:'certainty' }); 
       dataTable.addRows([
          [ new Date(2012, 3, 13), true ],
          [ new Date(2012, 3, 14), true ],
          [ new Date(2012, 3, 15), true ],
          [ new Date(2012, 3, 16), true ],
          [ new Date(2012, 3, 17), false ]
          // Many rows omitted for brevity.
        ]);
       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
       var options = {
         title: "Build Execution Analytics",
         height: 350,
       };
       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

每种图表类型都有一个特定的数据格式

日历图表不接受boolean列

从引用中，允许的列是。。。

第0列--date、datetime或timeofday
第1列--number
第n列--string-role: tooltip（可选）

我建议pass使用某个数字，fail 使用另一个数字

google.charts.load('current', {
  callback: function () {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'date', id: 'Date' });
    dataTable.addColumn({ type: 'number', id :'pass/fail' });
    dataTable.addRows([
      [ new Date(2012, 3, 13), 100 ],  // pass
      [ new Date(2012, 3, 14), 100 ],  // pass
      [ new Date(2012, 3, 15), 100 ],  // pass
      [ new Date(2012, 3, 16), 100 ],  // pass
      [ new Date(2012, 3, 17), 0 ]     // fail
    ]);
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
    chart.draw(dataTable, {
      title: 'Build Execution Analytics',
      height: 350,
    });
  },
  packages:["calendar"]
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

相关文章：