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
Flot-chart - customizing-bars mit Etiketten auf der Oberseite

Dies ist, wie es Aussehen müssen
Fehlende Daten auf der Oberseite der bars in %
Flot-chart - customizing-bars mit Etiketten auf der Oberseite

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 (toDataURL) richtig.

InformationsquelleAutor Pavlito | 2014-08-10

Schreibe einen Kommentar