Flot-chart Titel " option?

Tut Flot haben eine option, die eingestellt werden kann, geben Sie dem Diagramm einen Titel? Ich bin nicht zu sehen, eine für das gesamte Diagramm, nur für die Achsen.

Aber ich könnte etwas verpasst haben.

InformationsquelleAutor Colleen | 2011-08-24

  1. 10

    Ich glaube nicht, dass diese option vorhanden ist. Es ist ziemlich einfach, obwohl, der Titel der plot mit regulären HTML. Nur wickeln Sie ein div um dein "Platzhalter" div, und fügen Sie text für den Titel ein.

    Danke! Ich werde das tun.

    InformationsquelleAutor Mark

  2. 2

    nach Zeichnung flot Diagramm (plot-Funktion) fülle die Leinwand mit dem text (jsFiddle). Vorteil meiner Lösung ist, dass Sie können speichern, Diagramm als Bild mit Titel.

    Beispiel:

    var c=document.getElementsByTagName("canvas")[0];
var canvas=c.getContext("2d");
var cx = c.width /2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);
    Dies funktioniert nicht, wenn sich mehrere Diagramme auf der gleichen Seite.
    Es ist auch nicht die Arbeit mit retina-displays. Sie müssen fügen Sie die Zeilen: if (window.devicePixelRatio > 1) { cx = cx/window.devicePixelRatio; } unter "var cx" - Zeile anpassen.

    InformationsquelleAutor pioja

  3. 2

    1. Hooks können Sie für, die. Zum Beispiel die Verwendung der overlay-Haken, und bei der Umsetzung der overlay-Funktionalität in einem separaten OverlayHandler

      Hier ist ein Beispiel, wo die chartElement, chartDataund chartOptions sind für das HTML-element und flot Daten und flot-Optionen, respektive.:

      var plotOverlayHandler = function(plot, cvs) {
  if(!plot) { return; }
  var cvsWidth = plot.width() /2;

  var text = 'Flot chart-title!';
  cvs.font = "bold 16px Open Sans";
  cvs.fillStyle = "#666666";
  cvs.textAlign = 'center';
  cvs.fillText(text, cvsWidth, 30);
  return cvs;
};

var plot = $.plot(chartElement, chartData, chartOptions);
plot.hooks.drawOverlay.push( plotOverlayHandler );

    2. Beim Export der Leinwand über die native toDataURL Methode einfach anwenden OverlayHandler ersten. Dies ermöglicht eine größere Flexibilität.

      var elCanvas = $('canvas.flot-base').first();
var canvas = plotCanvasOverlay(elCanvas, elCanvas.get(0).getContext('2d'))
var dataUrl = canvas.toDataURL('image/png');
    plot.width() ist nicht zuverlässig, es wird sein, shooter, wenn yaxis ist groß. Verwenden cvs.canvas.width statt, es wird den Titel fest in der center-position.

    InformationsquelleAutor Lorenz Lo Sauer

  4. 1

    Pioja die Antwort ist in der Tat eine große eins. Seine jsFiddle zeigt die details. Es ist wichtig, die folgenden in Ihren Optionen:

    canvas: true,
grid: {
    margin: { top:50 }
}

    Dieser wird dann legen Sie eine schöne chart-Titel, die aufgenommen werden können in das Bild, wenn Sie es exportieren.

    InformationsquelleAutor Slaphead

  5. 1

    Gebäude auf pioja Antwort, die Titel können direkt nach dem Anschlag gemacht wurden:

    var plot = $.plot($("#"+PlotPlaceholder), data, options);

    Mithilfe der getCanvas Funktion:

    var c = plot.getCanvas();

    Nun Folgen Sie einfach pioja code zu bekommen:

    var canvas=c.getContext("2d");
var cx = c.width /2;
var text="Flot chart title";
canvas.font="bold 20px sans-serif";
canvas.textAlign = 'center';
canvas.fillText(text,cx,35);

    InformationsquelleAutor SupAl

Schreibe einen Kommentar