Javascript Flot图表-自定义顶部带有标签的条形图

需要帮助在条形图顶部设置数据

这是一部最新的作品

这就是它需要的样子 条形图顶部缺少数据，单位为%

因此，基本上我需要帮助，使顶部的数据/标签的酒吧

下面是javascript代码

$（文档）.ready（函数（）{
变量d1_1=[
[1325376000000, 10],
[1328054400000, 20],
[1330560000000, 30],
[1333238400000, 40],
[1335830400000, 35]
];
变量d1_2=[
[1325376000000, 80],
[1328054400000, 60],
[1330560000000, 20],
[1333238400000, 90],
[1335830400000, 30]
];
变量数据1=[{
标签：“产品1”，
数据：d1_1，
酒吧：{
秀：没错，
条宽：12*44*60*60*300，
填充：是的，
线宽：0，
订单：1，
填充颜色：{
颜色：[“#80C3FD”、“#0089FF”]
}
},
颜色：“rgba（243,89,88,0.7）”
},
{
标签：“产品2”，
数据：d1_2，
酒吧：{
秀：没错，
条宽：12*44*60*60*300，
填充：是的，
线宽：0，
订单：2，
填充颜色：{
颜色：[“F39494”和“F14D”]
}
},
颜色：“rgba（251、176、94、0.7）”
},
];
$.plot（$（“#占位符条形图”），数据1{
xaxis：{
min:（新日期（2011年11月15日））.getTime（），
max:（新日期（2012年4月18日））.getTime（），
模式：“时间”，
时间格式：“%b”，
tickSize:[1，“月”]，
//月份：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”、“九月”、“十月”、“十一月”、“十二月”]，
tickLength:0，//隐藏网格线
axisLabel:'月份'，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5，
滴答声：[
[1325376000000，‘高马’]，
[1328054400000，‘Giacompany’]，
[1330560000000，‘FreshFields’，
[133238400000，'通用'，
[1335830400000，‘绿叶’]
]
},
亚克斯：{
axisLabel:“%”，
Axislabulusecanvas：没错，
axisLabelFontSizePixels:12，
Axislabelfont家族：“Verdana、Arial、Helvetica、Tahoma、sans serif”，
axisLabelPadding:5，
尺寸：10，
tickFormatter:函数（val，轴）{
返回val+“%”；
},
},
网格：{
悬停：是的，
可点击：false，
边框宽度：0，
边框颜色：'#f0'，
labelMargin:8，
},
系列：{
阴影大小：1，
},
图例：{
秀:假,，
},
提示：正确，
工具提示：{
id:“图表工具提示”，
内容：“20份外发文件
”+
“已提交的10个中；
”+
“
”+
“30%%比率
”，
班次：{
x:-74，
y:-125
},
线路：{
轨迹：正确
},
同胞：是的，
},
});
});
#占位符条形图{
宽度：600px；
高度：300px；
}
以下是对该问题的回答：

如果执行
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');
});


可能与@Mark重复，链接的问题是引用的flot插件（值标签）不再被维护…@mccannf，请重新阅读我的答案。它主张不使用插件，而是自己创建数据标签。虽然它直接“写”在画布上，并且不使用绝对定位的div，但它与您的类似。我更喜欢我的方法，因为它可以正确地导出到图像（
toDataURL
）！这管用！我花了一整天的时间才弄明白怎么做+一把小提琴。（当我第一次看到答案时，图像被破坏，但fiddle让我查看输出。不知何故，我现在能够看到答案中的图像。OP中的图像仍然被破坏）。