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=bp-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=rm/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>