绘制Flot时间数据格式图

  时间数据格式最常与折线图搭配,可以用来看数据的走向及趋势,Flot的时间数据格式是以javascript timestamps为单位,也就是毫秒,从"1970-01-01 00:00"算起.在这章我们会介绍如何自定时间数据的输出格式.

  黄金价格(时间格式数据)范例
  所有需要的档案清单如下.jquery.flot.axislabels.js为轴标签的插件,jquery.flot.time.js为使用时间数据格式的插件.另外为了让IE8以下版本能显示Flot图表,所以需要excanvas.min.js插件.

  <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
  <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
  <script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
  <script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
  <script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>


  建立数据
  在范例里我们绘制了2条折线图,所以我们就建立2个数组变量,并在数组里插入数组格式如[x ,y],分别代表x轴及y轴资料,在x轴我们用了一个自定义函式gd(),是为了要抓取javascript timestamps资料,在这里我们准备了一个月的黄金价格数据,程序代码如下.

  //sell out   var data1 = [ [gd(2013, 1, 2), 1690.25], [gd(2013, 1, 3), 1696.3], [gd(2013, 1, 4), 1659.65], [gd(2013, 1, 7), 1668.15], [gd(2013, 1, 8), 1656.1], [gd(2013, 1, 9), 1668.65], [gd(2013, 1, 10), 1668.15], [gd(2013, 1, 11), 1680.2], [gd(2013, 1, 14), 1676.7], [gd(2013, 1, 15), 1680.7], [gd(2013, 1, 16), 1689.75], [gd(2013, 1, 17), 1687.25], [gd(2013, 1, 18), 1698.3], [gd(2013, 1, 21), 1696.8], [gd(2013, 1, 22), 1701.3], [gd(2013, 1, 23), 1700.8], [gd(2013, 1, 24), 1686.75], [gd(2013, 1, 25), 1680], [gd(2013, 1, 28), 1668.65], [gd(2013, 1, 29), 1671.2], [gd(2013, 1, 30), 1675.7], [gd(2013, 1, 31), 1684.25] ];
 //buy in   var data2 = [ [gd(2013, 1, 2), 1674.15], [gd(2013, 1, 3), 1680.15], [gd(2013, 1, 4), 1643.8], [gd(2013, 1, 7), 1652.25], [gd(2013, 1, 8), 1640.3], [gd(2013, 1, 9), 1652.75], [gd(2013, 1, 10), 1652.25], [gd(2013, 1, 11), 1664.2], [gd(2013, 1, 14), 1660.7], [gd(2013, 1, 15), 1664.7], [gd(2013, 1, 16), 1673.65], [gd(2013, 1, 17), 1671.15], [gd(2013, 1, 18), 1682.1], [gd(2013, 1, 21), 1680.65], [gd(2013, 1, 22), 1685.1], [gd(2013, 1, 23), 1684.6], [gd(2013, 1, 24), 1670.65], [gd(2013, 1, 25), 1664], [gd(2013, 1, 28), 1652.75], [gd(2013, 1, 29), 1655.25], [gd(2013, 1, 30), 1659.7], [gd(2013, 1, 31), 1668.2]  ];

  function gd(year, month, day) {
  return new Date(year, month - 1, day).getTime();
  }
  
  接着我们建立一个叫dataset的数组变量,把上面建立好的数据放到数组里的对象中,设定到data属性里,在这里我们还设定了label属性,这将会用做图例的显示名称,而color属性决定了折线图的颜色,points.fillColor属性则是数据点的填满颜色,另外也要将points.show设定为true,数据点符号才会显示,最后因为我们是画折线图,所以要设定lines.show为true,折线图才会出现.
  var dataset = [ {
   label: "Sell out",
   data: data1,
   color: "#FF0000",
  points: { fillColor: "#FF0000", show: true },
   lines: { show: true } }, {
   label: "Buy in",
   data: data2,
   xaxis:2,
   color: "#0062E3",
   points: { fillColor: "#0062E3", show: true },
   lines: { show: true } } ];
  
  建立图表选项
  在这里我们为了让图表看起来美观一点,我们设定了series.shadowSize,这会让折线图绘出阴影,让图表看起来更立体.
  series: {   shadowSize: 5   }
  
  在y轴的选项里,yaxis.color表示y轴刻度卷标的文字颜色,这里设定成黑色的.而yaxis.tickDecimals是用来设定y轴刻度标签的小数点位数,因为黄金价格是有小数的,所以我们设定成显示2位小数,输出看起来就会是像1650.00,而所有axisLabel开头的属性都是属于轴标签的,也就是我们在一开始时加入的jquery.flot.axislabels.js插件的功能.
  yaxis: {
  color: "black",
  tickDecimals: 2,
  axisLabel: "Gold Price in USD/oz",
  axisLabelUseCanvas: true,
  axisLabelFontSizePixels: 12,
  axisLabelFontFamily: 'Verdana, Arial',
  axisLabelPadding: 5
  }
  
  因为x轴的部份是显示时间数据格式的,所以在xaxis.mode里需要设定成"time",这样Flot才会以时间格式编译x轴的刻度标签.另外我们用了xaxis.tickFormatter自行定义刻度标签要输出的格式,在这里我们输出成星期几,若是不用自行定义的方式,你也可以设定timeformat:"%a"让卷标显示星期几.xaxis.position表示刻度标签要出现在那里,我们设定成"top"表示出现在图表的上方.

  在x的第二个轴的部份,我们设定了tickformat:"%m/%d",表示刻度标签会输入出:01/05的日期格式,若要输出年含年度的日期可以写成"%Y/%m/%d",输出会变成:2012/01/05,Flot还支持其它的日期格式设定.另外我们还设定了tickSize:[3, "day"],这表示刻度标签会以每3天的间隔显示,如果设定成tickSize:[2, "month"]则表示刻度标签会以每2个月的间隔显示
  var dayOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat"];

  xaxes: [ {
  mode: "time",
  tickFormatter: function (val, axis) {
  return dayOfWeek[new Date(val).getDay()];
  },
  color: "black",
  position: "top",
  axisLabel: "Weekday",
  axisLabelUseCanvas: true,
  axisLabelFontSizePixels: 12,
  axisLabelFontFamily: 'Verdana, Arial',
  axisLabelPadding: 5
  },{
  mode: "time",
  timeformat: "%m/%d",
  tickSize: [3, "day"],
  color: "black",
  axisLabel: "Date",
  axisLabelUseCanvas: true,
  axisLabelFontSizePixels: 12,
  axisLabelFontFamily: 'Verdana, Arial',
  axisLabelPadding: 10
  } ]
  
  完成绘图
  最后我们再呼叫$.plot把上面建立的dataset以及options带入,再呼叫UseTootip()后,整个绘图即完成.
  $(document).ready(function () {
  $.plot($("#flot-placeholder"), dataset, options);
  $("#flot-placeholder").UseTooltip();
  });
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页