Question

我正在尝试使用google-chart聚合物元素（http://googlewebcomponents.github.io/google-chart/components/google-chart/）来绘制Ligth ON / OFF图表。

这就是我使用“区域”图表。

my chart

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

this.$.chart.type = "stepped-area";
this.$.chart.cols = [{label:"Date", type:"date"}, {label:"On/Off", type:"number"}];
this.$.chart.rows = chartData;
this.$.chart.options = { strictFirstColumnType: "false", backgroundColor: "transparent" };
this.$.chart.drawChart();

但是当我尝试使用 date 类型作为我的第一列时，我得到了“不支持带有值域轴的步进区域系列。”。

还有其他办法吗？也许设置一些其他选项（ strictFirstColumnType：“false”不起作用）？

Answer 1

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

这里是代码：

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";

这是我的最终结果：

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

Answer 2

你也可以使用timeline - 图表，就像这个小提琴一样：

https://jsfiddle.net/dx0Lw52b/

如何绘制ON / OFF图表

2 个答案: