javascript - 如何绘制 ON/OFF 图表

Question

我正在尝试使用 google-chart polymer 元素 ( http://googlewebcomponents.github.io/google-chart/components/google-chart/ ) 绘制 Light ON/OFF 图表。

这是我使用“面积”图表得到的结果。

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

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();

但是，当我尝试使用日期类型作为我的第一列时，我收到“不支持具有值域轴的阶梯式区域系列。”。

还有其他方法可以做到这一点吗？ 也许设置一些其他选项(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";

这是我的最终结果:

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