Javascript 如何绘制开/关图表

我正在尝试使用google图表聚合元素（）绘制灯光开/关图表

这是我用“面积”图得到的

然而，我想要一个可以读取光的“状态”的图形，因此更好的表示方法是使用步进图。这是我使用“阶梯区域”图表的代码

然而，当我尝试使用日期类型作为我的第一列时，我得到了一个“不支持带值域轴的阶梯区域序列”

还有别的办法吗？

---

也许设置其他选项（strictFirstColumnType：“false”不起作用）

最终我的解决方法是使用字符串日期

下面是代码：

this.graphs[tuple.uuid].cols =  [{label:"Date", type:"string"}, {label: tuple.behavior, type:"number"}];
this.graphs[tuple.uuid].rows =  [];
this.graphs[tuple.uuid].options =  {
   backgroundColor: "transparent",
   hAxis: { 
      slantedText: true
   },
   vAxis: { 
      minValue:0,
      maxValue:1,
      gridlines:{count:2},
      ticks: [{v:1.00, f:'ON'}, {v:0.00, f:'OFF'}] 
   }
};
this.graphs[tuple.uuid].type = "stepped-area";

这是我的最终结果：

---

日期标签仍然不容易阅读，但最终的结果并不坏。

最终我的解决方法是使用字符串日期

下面是代码：

this.graphs[tuple.uuid].cols =  [{label:"Date", type:"string"}, {label: tuple.behavior, type:"number"}];
this.graphs[tuple.uuid].rows =  [];
this.graphs[tuple.uuid].options =  {
   backgroundColor: "transparent",
   hAxis: { 
      slantedText: true
   },
   vAxis: { 
      minValue:0,
      maxValue:1,
      gridlines:{count:2},
      ticks: [{v:1.00, f:'ON'}, {v:0.00, f:'OFF'}] 
   }
};
this.graphs[tuple.uuid].type = "stepped-area";

这是我的最终结果：

---

日期标签仍然不容易阅读，但最终结果一点也不差。

您也可以使用

时间线图，如下图所示：


您也可以使用
时间线图，如下图所示：