如何画Flot时间数据格式图

Posted 2023-05-01

　　时间数据格式最常与折线图搭配,可以用来看数据的走向及趋势,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();
　　);
　　 参考技术A 建议你贴出数据库 另flot 是json的格式 可能还要函数转一下 所谓的xy互转 可能是数据的切换而非flot的切换

几个图在flot中具有相同的图例

【中文标题】几个图在flot中具有相同的图例

【英文标题】：several graph has the same legend in flot

【发布时间】：2020-12-05 22:32:46

【问题描述】：

我正在使用 JQuery Flot 图形插件在页面中绘制一些条形图。当我按以下数据和选项绘制图表时：

 
        var chartData = [
              label: 'success',
              data: [[0,1],[1,1]],
              bars: 
                  order: 0,
                  fillColor: '#fff'
              ,
              color: '#fff'
            , 
              label: 'fail',
              data: [[0,3],[2,1]],
              bars: 
                order: 1,
                fillColor: 'rgba(255,255,255,0.5)'
              ,
              color: 'rgba(255,255,255,0.5)'
            ];

 
        var barChartOptions = 
        ...
        legend:
            container: '.flot-chart-legends--bar',
            backgroundOpacity: 0.5,
            noColumns: 0,
            lineWidth: 0,
            labelBoxBorderColor: 'rgba(255,255,255,0)'
        
    ;
  $.plot($('.flot-bar'), chartData, barChartOptions);

它适用于我的条形图，但是，没有标签的其他图表附加了相同的标签。我该怎么做呢？请帮忙！

【参考方案1】：

我解决了！查看flot.js中的源码，发现不正确的代码如下：

$(options.legend.container).html(table);

这使得container 的所有选择器都包含相同的html。我是这样更正的：

placeholder.parent().find(options.legend.container).html(table);

并且 html 只附加到我想要的正确图表上。