Question

我想在Google的日历类型图表上使用布尔类型（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>

Answer 1

每种图表类型都有一个特定的Data Format

日历图表不接受boolean列

来自参考，允许列是......

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

我建议对pass使用一定数字，为fail

使用另一个数字

＆＃13;

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"]
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>

＆＃13;

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

1 个答案: