javascript 浮图 - 自定义顶部带有标签的条形图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25231812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flot chart - customizing bars with labels on top
提问by Pavlito
Need help to set data on top of bar chart.
需要帮助在条形图顶部设置数据。
This is a current work
这是当前的工作
This is how it need to look
Missing data on top of bars in %
这就是它需要如何查看条形顶部的缺失数据，以 % 为单位
So basicaly need help that top data/labels on bars
所以基本上需要帮助栏上的顶部数据/标签
Here is the javascript code
这是javascript代码
$(document).ready(function() {
var d1_1 = [
[1325376000000, 10],
[1328054400000, 20],
[1330560000000, 30],
[1333238400000, 40],
[1335830400000, 35]
];
var d1_2 = [
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 20],
[1333238400000, 90],
[1335830400000, 30]
];
var data1 = [
{
label: "Product 1",
data: d1_1,
bars: {
show: true,
barWidth: 12*44*60*60*300,
fill: true,
lineWidth:0,
order: 1,
fillColor: {
colors: ["#80C3FD", "#0089FF"]
}
},
color: "rgba(243, 89, 88, 0.7)"
},
{
label: "Product 2",
data: d1_2,
bars: {
show: true,
barWidth: 12*44*60*60*300,
fill: true,
lineWidth: 0,
order: 2,
fillColor: {
colors: ["#F39494", "#f14d4d"]
}
},
color: "rgba(251, 176, 94, 0.7)"
},
];
$.plot($("#placeholder-bar-chart"), data1, {
xaxis: {
min: (new Date(2011, 11, 15)).getTime(),
max: (new Date(2012, 04, 18)).getTime(),
mode: "time",
timeformat: "%b",
tickSize: [1, "month"],
//monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
tickLength: 0, // hide gridlines
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5,
ticks:[[1325376000000,'Takaoma'],[1328054400000,'Giacompany'],[1330560000000,'FreshFields'],[1333238400000,'Generalisimo'],[1335830400000, 'Greenleaves']]
},
yaxis: {
axisLabel: '%',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5,
tickSize: 10,
tickFormatter: function (val, axis) {
return val + "%";
},
},
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
borderColor:'#f0f0f0',
labelMargin:8,
},
series: {
shadowSize: 1,
},
legend: {
show: false,
},
tooltip:true,
tooltipOpts: {
id:"chart-tooltip",
content: "<p><b>20</b> Outgoing Filings</p>" +
"<p>Out of <b>10</b> committed;</p>" +
"<br />" +
"<p><b>30%</b>% Ratio</p>",
shifts: {
x:-74,
y:-125
},
lines:{
track: true
},
compat: true,
},
});
});
});
回答by mccannf
Following on from the answer to this question: Flot Data Labels
继续回答这个问题：Flot Data Labels
If you do var p = $.plot...you can iterate over the data points for both series like so:
如果你这样做，var p = $.plot...你可以像这样迭代两个系列的数据点：
$.each(p.getData()[0].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '%</div>').css( {
position: 'absolute',
left: o.left - 25,
top: o.top - 20,
display: 'none'
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
$.each(p.getData()[1].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '%</div>').css( {
position: 'absolute',
left: o.left + 4,
top: o.top - 20,
display: 'none'
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
and you get something like this:
你会得到这样的东西：
