Flot-chart - customizing-bars mit Etiketten auf der Oberseite
Hilfe benötigen, um set-Daten auf der Oberseite von Balken-Diagramm.
Dies ist eine aktuelle Arbeit
Dies ist, wie es Aussehen müssen
Fehlende Daten auf der Oberseite der bars in %
So etwar Hilfe benötigen, die top-Daten/Aufkleber auf bars
Hier ist der javascript-code
$(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,
},
});
});
mögliche Duplikate von JQuery Flot, valuelabels, center
problem mit dem link ist, dass die flot-plugin (Value Labels) verwiesen wird, wird nicht mehr gepflegt...
re-Lesen Sie meine Antwort. Es wird argumentiert, NICHT das plugin zu benutzen und um die Daten zu erstellen Etiketten selbst. Wenn ' s etwas ähnlich wie bei Ihnen, obwohl es "schreibt" direkt auf die Leinwand und nicht mit absolut positionierten divs. Ich bevorzuge mein Ansatz, da es zu exportieren, um ein Bild (
problem mit dem link ist, dass die flot-plugin (Value Labels) verwiesen wird, wird nicht mehr gepflegt...
re-Lesen Sie meine Antwort. Es wird argumentiert, NICHT das plugin zu benutzen und um die Daten zu erstellen Etiketten selbst. Wenn ' s etwas ähnlich wie bei Ihnen, obwohl es "schreibt" direkt auf die Leinwand und nicht mit absolut positionierten divs. Ich bevorzuge mein Ansatz, da es zu exportieren, um ein Bild (
toDataURL
) richtig.
InformationsquelleAutor Pavlito | 2014-08-10
Du musst angemeldet sein, um einen Kommentar abzugeben.
Anknüpfend an die Antwort auf diese Frage: Flot Daten Etiketten
Wenn Sie
var p = $.plot...
können Sie iterieren über die Daten-Punkte für beide Serien in etwa so:und Sie bekommen so etwas wie dieses:
Fiedel hier
+1 für die Geige. (Als ich zum ersten mal die Antwort, das Bild war gebrochen, aber der fiddle-lassen Sie mich sehen Sie die Ausgabe. Irgendwie bin ich in der Lage, um zu sehen, das Bild in der Antwort nun. Bilder im OP sind immer noch defekt).
danke!!! Arbeit für mich
InformationsquelleAutor mccannf