我目前正在创建条形图，并希望满足以下要求：
每个酒吧的标签
将条在网格中间居中
这是我的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);
});这是我的期望：
我想在每个栏的顶部显示标签，我该如何设置？
如何在网格和条刻度之间设置相等的宽度？
目前，我得到这个：
任何帮助将不胜感激。提前致谢。
最佳答案
您必须为此使用插件（或自己编写代码）。例如https://github.com/winne27/flot-valuelabels。
您可以通过设置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>关于javascript - Flot:自定义条形图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49541248/