Darstellung x-Achse und die y-Achsen Linien mit der grid Linien mit flot

Ich bin mit flot zur Anzeige von Balkendiagrammen. Wenn ich die tickLength auf 0, es blendet die vertikalen und horizontalen Linien, aber es verbirgt sich auch die x-Achse und y-Achse Linien. Ich brauche die x-Achse und y-Achse mit der vertikalen und horizontalen Gitterlinien. Gibt es eine Möglichkeit, dies zu tun?

Sehen Sie bitte das zweite Diagramm in das Bild. Das ist das, was ich will.Darstellung x-Achse und die y-Achsen Linien mit der grid Linien mit flot

InformationsquelleAutor Sridhar | 2011-09-15

  1. 18

    Dies ist komplizierter als ich dachte, es wäre. Das einzige, was ich mit oben kommen kann ist das deaktivieren der Grenze und Achse Linien, als fügen Sie Sie zurück in manuell:

    $(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { xaxis: { from: 0, to: 10 }, yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, yaxis: { from: 0, to: 15 }, color: "#000" }]
        }
      }
    );
});

    Produziert:

    Darstellung x-Achse und die y-Achsen Linien mit der grid Linien mit flot

    Vielen Dank für diese. Es hat mir geholfen, mit einem ähnlichen problem--zeichnen einer horizontalen null-Achse Linie über das Diagramm.
    Danke, es hat mir geholfen, eine Menge.
    Überprüfen Sie meine Antwort für eine bessere Art und Weise zu definieren, die Markierungen.

    InformationsquelleAutor Mark

  2. 7

    Mark Antwort funktioniert, aber es ist ein wenig zu hart-codiert für seine Daten. Dieses ist ein wenig besser:

    $(function() {
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
    $.plot($("#placeholder"),
      [{data: d2,
        bars: {
            show: true
        }}
      ],
      {
        xaxis: {
            tickLength: 0
        },
         yaxis: {
            tickLength: 0
        },
        grid: {
           borderWidth: 0,
           aboveData: true,
           markings: [ { yaxis: { from: 0, to: 0 }, color: "#000" },
                       { xaxis: { from: 0, to: 0 }, color: "#000" }]
        }
      }
    );
});

    Immer noch, wenn das Diagramm beginnt bei einem Wert anders als 0 ist, müssen Sie manuell ändern Sie die Markierungen.

    InformationsquelleAutor Hoffmann

  3. 4

    Einstellung

    xaxis: { tickLength: 0 }, yaxis: { tickLength: 0 }

    wird auch das ausblenden der Gitterlinien.

    scheint so, das ist die einfache Antwort, die für mich gearbeitet, Dank =)

    InformationsquelleAutor Ryan

  4. 2

    Für den Fall eines (0,0) Ursprung, Sie fälschen die Achsen, die von nur der Zeichnung unteren und linken Rand, Zeilen:

    grid: {
    borderColor: 'black',
    borderWidth: {
        top: 0,
        right: 0,
        bottom: 2,
        left: 2
    },
    ...
}

    InformationsquelleAutor Mark Foreman

  5. 0

    Versuchen, die Farbe der Linien in weiß (oder in deiner Hg-Farbe)

     yaxis: 
  . . .
  tickColor: "#cccccc" /* or better "#ffffff" */
  . . .

    InformationsquelleAutor Atara

Schreibe einen Kommentar