javascript - 如何在Google日历图表中使用 bool 类型列?

标签 javascript html charts google-visualization

我想在谷歌的日历类型图表上使用 bool 类型(真/假)来描述构建状态(通过或失败)。我使用下面的 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>

最佳答案

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

日历图表不接受 bool

根据引用,允许的列是...

第 0 列 -- 日期日期时间timeofday
第 1 列 -- 数字
第 n 列 -- 字符串 -- Angular 色:工具提示 (可选)

我建议使用某个数字表示通过,使用另一个数字表示失败

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>

关于javascript - 如何在Google日历图表中使用 bool 类型列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37268277/

相关文章:

javascript - 单页应用程序 - 大型 DOM - 慢

php - 如何将内容加载到类似灯箱的叠加层中

javascript - meteor 中带有 chart.js 的 react 图表

javascript - 我怎样才能用 flot 只绘制点(而不是线)?

javascript - 迭代数据并映射到不同的组件

javascript - 将 div 元素调整为原始大小, 'required' 大小

html - 为什么在 'new line' 或 'POST' 请求后 django 模板中缺少一个 'GET'?

javascript - 在 asp .net mvc 中使用 jquery 将文件作为参数传递

javascript - HTML5 Canvas 游戏静态实体元素

没有 Comet 的 Jquery 实时图表