javascript - Flot:自定义条形图

Question

我目前正在创建条形图，并希望实现以下要求:

1. 每个栏的标签
2. 将条形图置于网格中间居中

这是我的 jquery 代码:

var data = [[0,206],[1,118],[2,37]];
    var dataset = [
        { label: "", data: data, color: "#296292" }
    ];
    var ticks = [[0,"CPU"],[1,"Hung Process"],[2,"Disk Queue"]];
    var options = {
        series: {
            bars: {
                show: true
            }
        },
        bars: {
            align: "center",
            barWidth: 0.5, fill: 1
        },
        xaxis: {
            axisLabel: "Alerts",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            ticks: ticks
        
        },
        yaxis: {
            //axisLabel: "Count",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
        },
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 2,        
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        }
    };


    $(document).ready(function () {
        debugger
        $.plot($("#top5Alerts_canvas"), dataset, options);
    });

这是我的期望:

1. 我想在每个栏的顶部显示标签，如何设置？
2. 如何设置网格和条形刻度之间的等宽？

目前，我得到的是:

任何帮助将不胜感激。提前致谢。

Answer 1

1. 您必须为此使用插件(或自己编写代码)。例如https://github.com/winne27/flot-valuelabels .

2. 您可以通过设置 x 轴的最小值和最大值来实现这一点。

请参阅完整示例的代码片段。

// valuelabel plugin code (https://github.com/winne27/flot-valuelabels)

!function(a){"use strict";function e(e){e.hooks.draw.push(function(e,t){var l,s,o,i,r,n,d,f,u,b,h,v,x,g,c,L,w,p,m,M,y,z,O,C={},P="left";a.each(e.getData(),function(a,B){if(B.valueLabels.show||B.stack){var k=B.valueLabels.showLastValue,A=B.valueLabels.showMaxValue,S=B.valueLabels.showMinValue,F=B.valueLabels.showTextLabel,V=B.valueLabels.labelFormatter,Z=B.valueLabels.xoffset,T=B.valueLabels.yoffset,I=B.valueLabels.xoffsetMin||Z,D=B.valueLabels.yoffsetMin||T,R=B.valueLabels.xoffsetMax||Z,X=B.valueLabels.yoffsetMax||T,Y=B.valueLabels.xoffsetLast||Z,j=B.valueLabels.yoffsetLast||T,Q=B.valueLabels.valign,W=B.valueLabels.valignLast||Q,q=B.valueLabels.valignMin,E=B.valueLabels.valignMax,G=B.valueLabels.align,H=B.valueLabels.rotate||0,J=B.valueLabels.horizAlign,K=B.valueLabels.horizAlignMin||J,N=B.valueLabels.horizAlignMax||J,U=B.valueLabels.horizAlignLast||J,$=B.valueLabels.fontcolor||"#222222",_=B.valueLabels.shadowColor,aa=B.valueLabels.font||B.xaxis.font||"9pt san-serif",ea=B.valueLabels.hideZero,ta=B.valueLabels.hideSame,la=B.valueLabels.reverseAlignBelowZero,sa=B.valueLabels.showShadow,oa=B.valueLabels.useDecimalComma,ia=B.stack,ra=B.valueLabels.decimals,na=B.valueLabels.useBackground,da=B.valueLabels.backgroundColor,fa=B.valueLabels.useBorder,ua=B.valueLabels.borderColor,ba=B.bars.order||0;B.seriesIndex=a;var ha=null,va=-1e3,xa=-1e3,ga="categories"==B.xaxis.options.mode,ca="categories"==B.yaxis.options.mode;if(O=B.points.show?B.points.radius-B.points.lineWidth/2:0,(S||A)&&"undefined"!=typeof B.data[0]){B.data[0][0]=+B.data[0][0],B.data[0][1]=+B.data[0][1];for(var La=+B.data[0][0],wa=+B.data[0][0],pa=+B.data[0][1],ma=+B.data[0][1],Ma=1;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1],+B.data[Ma][0]<La&&(La=+B.data[Ma][0]),+B.data[Ma][0]>wa&&(wa=+B.data[Ma][0]),+B.data[Ma][1]<pa&&(pa=+B.data[Ma][1]),+B.data[Ma][1]>ma&&(ma=+B.data[Ma][1])}else{S=!1,A=!1;for(var Ma=0;Ma<B.data.length;++Ma)B.data[Ma][0]=+B.data[Ma][0],B.data[Ma][1]=+B.data[Ma][1]}g=S||A||k;for(var Ma=0;Ma<B.data.length;++Ma)if(null!==B.data[Ma]){if(s=B.data[Ma][0],d=B.data[Ma][1],l=F&&B.data[Ma].length>2?B.data[Ma][2]:!1,g){if(c=!1,S&&pa==d&&!B.bars.horizontal?(c=!0,n=I,h=D,v=q,S=!1):S&&La==s&&B.bars.horizontal?(c=!0,n=I,h=D,x=K,S=!1):A&&ma==d&&!B.bars.horizontal?(c=!0,n=R,h=X,v=E,A=!1):A&&wa==s&&B.bars.horizontal?(c=!0,n=R,h=X,x=N,A=!1):k&&Ma==B.data.length-1&&!B.bars.horizontal?(c=!0,n=Y,h=j,v=W):k&&Ma==B.data.length-1&&B.bars.horizontal&&(c=!0,n=Y,h=j,x=U),!c)continue}else la&&0>d&&!B.bars.horizontal?(n=Z,h=-1*T,"above"==Q?Q="below":"below"==Q&&(Q="above"),v=Q):(n=Z,h=T,v=Q,x=J);if("top"==v&&(v="above"),ga&&(s=B.xaxis.categories[s]),ca&&(d=B.yaxis.categories[d]),!(s<B.xaxis.min||s>B.xaxis.max||d<B.yaxis.min||d>B.yaxis.max)){if(l!==!1)L=l;else{if(L=B.bars.horizontal?s:d,null==L&&(L=""),0===L&&(ea||ia))continue;ra!==!1&&(L=parseFloat(L).toFixed(ra))}if(B.valueLabels.valueLabelFunc&&(L=B.valueLabels.valueLabelFunc({series:B,seriesIndex:a,index:Ma})),L=""+L,L=V(L,{series:B,point:B.data[Ma]}),!ta||L!=ha||Ma==B.data.length-1){if(B.bars.horizontal&&(t.font=aa,y=fa||na?10:6,Math.abs(B.xaxis.p2c(s)-B.xaxis.p2c(0))<t.measureText(L).width+Math.abs(n)+y&&"outside"!=x&&(n=-1*n,x="outside")),oa&&(L=L.toString().replace(".",",")),w=0,ia){var ya=s+"-"+ba;if(C[ya]||(C[ya]=0),w=C[ya],C[ya]=C[ya]+d,!B.valueLabels.show)continue}o=B.xaxis.p2c(s)+e.getPlotOffset().left,f=B.yaxis.p2c(d+w)+e.getPlotOffset().top,(!ta||Math.abs(f-xa)>20||o>va)&&(ha=L,va=o+8*L.length,xa=f,B.bars.horizontal?(b=f,z="middle",s>=0?"outside"==x?(P="left",n+=4):"insideMax"==x?(P="right",n-=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="left",o=e.getPlotOffset().left+B.xaxis.p2c(0)+3+n):"outside"==x?(P="right",n-=4):"insideMax"==x?(P="left",n+=4):"insideCenter"==x?(P="center",o=e.getPlotOffset().left+B.xaxis.p2c(0)+(B.xaxis.p2c(s)-B.xaxis.p2c(0))/2+n):"insideZero"==x&&(P="right",o=e.getPlotOffset().left+B.xaxis.p2c(0)-4+n),r=o+n):("bottom"==v?(z="bottom",f=e.getPlotOffset().top+e.height()):"middle"==v?(z="middle",M=e.getPlotOffset().top+e.height(),f=(M+f)/2):"below"==v?(z="top",h=h+4+O):"above"==v&&(z="bottom",h=h-2-O),r=o+n,b=f+h,0>=f&&(b+=16),o>=e.width()+e.getPlotOffset().left?(r=e.width()+e.getPlotOffset().left+n-3,P="right"):P=G),t.font=aa,(fa||na)&&(m=t.measureText(L).width+5,m%2==1&&m++,p=parseInt(aa,10)+7,"top"==z?(u=b,b+=3):"bottom"==z?(u=b-p-2,b-=2):"middle"==z&&(u=b-(p+1)/2,b+=1),"right"==P?(i=r-m+1,r-=2):"left"==P?(i=r,r+=3):i=r-m/2,t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=0,fa&&(t.strokeStyle=ua,t.strokeRect(i,u,m,p)),na&&(t.fillStyle=da,t.fillRect(i,u,m,p))),t.fillStyle=$,t.save(),sa?(t.shadowOffsetX=0,t.shadowOffsetY=0,t.shadowBlur=1.5,t.shadowColor=_):t.shadowBlur=0,t.translate(r,b),0!=H&&t.rotate(H*Math.PI/180),t.textAlign=P,t.textBaseline=z,t.fillText(L,0,0),t.restore())}}}}})})}var t={series:{valueLabels:{show:!1,showTextLabel:!1,showMaxValue:!1,showMinValue:!1,showLastValue:!1,labelFormatter:function(a){return a},align:"center",valign:"above",valignMin:"below",valignMax:"above",horizAlign:"insideMax",xoffset:0,yoffset:0,rotate:0,useDecimalComma:!1,decimals:!1,hideZero:!1,hideSame:!1,reverseAlignBelowZero:!1,showShadow:!1,shadowColor:!1,useBackground:!1,backgroundColor:"#cccccc",fontcolor:"#222222",useBorder:!1,borderColor:"#999999"}}};a.plot.plugins.push({init:e,options:t,name:"valueLabels",version:"2.2.0"})}(jQuery);



// code for chart

var data = [
  [0, 206],
  [1, 118],
  [2, 37]
];
var dataset = [{
  label: "",
  data: data,
  color: "#296292",
  valueLabels: {
    show: true
  }
}];
var ticks = [
  [0, "CPU"],
  [1, "Hung Process"],
  [2, "Disk Queue"]
];
var options = {
  series: {
    bars: {
      show: true
    }
  },
  bars: {
    align: "center",
    barWidth: 0.5,
    fill: 1
  },
  xaxis: {
    axisLabel: "Alerts",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    ticks: ticks,
    min: -0.5,
    max: 2.5
  },
  yaxis: {
    //axisLabel: "Count",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
  },
  legend: {
    noColumns: 0,
    labelBoxBorderColor: "#000000",
    position: "nw"
  },
  grid: {
    hoverable: true,
    borderWidth: 2,
    backgroundColor: {
      colors: ["#ffffff", "#EDF5FF"]
    }
  }
};

$(document).ready(function() {
  debugger
  $.plot($("#top5Alerts_canvas"), dataset, options);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<div id="top5Alerts_canvas" style="height: 300px;"></div>