Titel für die x-und y-Achse in Flot Diagramm

Ist es möglich zu zeigen-Titel für die x-und y-Achse in flot Diagramm?

Folgenden code:

    $.plot($("#placeholder_1w"), [d], {
        series: {
        lines: { show: true, fill: false, fillColor: "red" },
        points: { show: true, fill: true,fillColor: "red"  }
    },
        grid: { hoverable: true, clickable: true , color: 'green'},
        xaxis: {
            mode: "time",
            minTickSize: [1, "day"],
            min: (myWeekDate).getTime(),
            max: (new Date()).getTime()
        },
        colors: ["red", "green", "#919733"]
    });
InformationsquelleAutor user1871640 | 2012-12-11
  1. 16

    Flot nicht unterstützt Achse-Etiketten selbst, aber Sie können ziemlich leicht fügen Sie Sie mithilfe von html und css, und ein bisschen Veränderung, um Ihre flot-Optionen.

    Die demo auf der flot Website hat eine y-Achse label. Es wird erstellt, indem ein div mit bestimmten Klassen auf die flot-container:

    var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>")
  .text("My X Label")
  .appendTo($('#placeholder_1w'));

var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
  .text("Response Time (ms)")
  .appendTo($('#placeholder_1w'));

    Dann, müssen Sie CSS so:

    .axisLabel {
    position: absolute;
    text-align: center;
    font-size: 12px;
}

.xaxisLabel {
    bottom: 3px;
    left: 0;
    right: 0;
}

.yaxisLabel {
    top: 50%;
    left: 2px;
    transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform:  rotate(-90deg);
    transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
}

    Wenn Sie brauchen, um Unterstützung für IE6/7, es gibt noch mehr Tricks, um mit viel leider - würden Sie wollen, dass Ihr body-tag gekennzeichnet werden mit der Klasse "ie6" oder "ie7" von etwas wie dies:

    <!--[if IE 6]><body class="ie ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7"><![endif]-->
<!--[if IE 8]><body class="ie ie8"><![endif]-->
<!--[if IE 9]><body class="ie ie9"><![endif]-->
<!--[if gt IE 9]><body class="ie"><![endif]-->
<!--[if !IE ]><!--><body><!--<![endif]-->

    Und dann diese zusätzliche CSS:

    .ie7 .yaxisLabel, .ie8 .yaxisLabel {
    top: 40%;
    font-size: 36px;
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand');
}

    Schließlich in meine versuche, dies zu tun, fand ich, dass ich benötigt, um geben Sie einen festen labelWidth für die y-Achse und eine Feste labelHeight für die x-Achse.

    Siehe ein Beispiel hier: http://jsfiddle.net/ryleyb/U82Dc/

    InformationsquelleAutor Ryley
  2. 5

    Gibt es ein plugin für flot hier: https://github.com/mikeslim7/flot-axislabels zu implementieren Achsenbeschriftungen.

    Aber es wird nicht unterstützt in IE-Browser kleiner als version 9.0. @Ryley ' s Lösung ist eine Coole.

    • Dieses plugin ist mehr die jüngsten: github.com/markrcote/flot-axislabels
    • danke @cederlof Sie meinen Tag gerettet Bimal dieses plugin ist alt und habe einige Probleme mein Problem gelöst durch die Verwendung github.com/markrcote/flot-axislabels
    InformationsquelleAutor Bimal
Schreibe einen Kommentar