flot-Balken-Diagramm x-Achse Beschriftung mit gedrehtem text von -90 Ausrichtung Ausgabe

Ich bin mit flot-Bibliothek zu entwerfen, stacked-bar graph, wobei ich mit folgenden js-Dateien.

<script src="@Url.Content("~/Scripts/charts/excanvas.js")"></script>
<script src="@Url.Content("~/Scripts/charts/jquery.flot.js")"></script>
<script src="@Url.Content("~/Scripts/charts/jquery.flot.symbol.js")"></script>

Mit dem folgenden Skript bin ich die Definition meiner Balkendiagramm mit gedrehtem text auf der x-Achse Beschriftung von -90 Grad.

 $.each(data, function (index, item) {
                i = (index + 1) * 2;
                DataValues.push({ data: [i, item.Value], color: Color[i] });
                DataValues.push([i, item.Value]);
                TickData.push([i, item.MonthName]);
            });
            $.plot($("#CurrentYearlyTrendsBar"), [{ data: DataValues, color: "#3D69AA" }],
                    {
                        series: { bars: { show: true } },
                        bars: {
                            barWidth: 1.5,
                            align: "center"
                        },
                        xaxis: {
                            ticks: TickData,
                            axisLabelUseCanvas: true,
                            labelAngle: -90,
                        },
                        yaxis: { axisLabelUseCanvas: true },
                        grid: { hoverable: true }
                    });
            $("#CurrentYearlyTrendsBar").UseTooltip();

Das problem, das ich habe, ist mit der Positionierung der x-Achse labels. x-Achse-Beschriftungen sind positioniert, um den linken Rand der jeweiligen Balken im Diagramm.

Bitte mir empfehlen, wie kann ich den center richten Sie die x-Achse Beschriftungen an den jeweiligen bars.
Vielen Dank im Voraus...

  • Können Sie Schildern Ihr Problem mit Bild oder Geige?
  • Flot nicht unterstützt gedrehte Achsenbeschriftung doch noch, welche plugins Sie verwenden, um zu tun? Welche version von Flot verwenden Sie?
  • Ich m nicht in der Lage Bild hinzufügen in Frage wegen min Ruf Einschränkung von stackoverflow & I havent verwendet fiddler noch. So können Sie mir empfehlen, wie kann ich ein Bild Anhängen mit der Frage,
  • Sie link zu Ihrem Bild, um eine Quelle wie die Bild-hosting-website.Und als DNS-sagte Flot nicht inbuild Unterstützung für gedrehte Achsenbeschriftung noch.Sehen Sie, wenn Sie etwas fehlt in deiner Frage
  • Ich m, die mit der Version 1.1. Ich bin in der Lage, drehen Sie den text mit dieser version, nur ein problem mit der Positionierung der Beschriftung. Es ist ausgerichtet auf die linke Kante des vertikalen Balken.
  • bitte schauen Sie auf den chart hier docs.google.com/file/d/0B0XPOhJetWWwaENBYlhRZ3N5U0k/...
  • das ist gut, aber ich dont sehen irgendwelche axis label in Ihrem Diagramm.Das sind die hilfsstrichbeschriftungen. Ich sehe nicht, eine option labelAngle: -90 im flot-API.sind Sie sicher? Bitte überprüfen Sie mein und wenn es keinen Sinn macht, für Sie.
  • Es gibt keine version 1.1 von Flot, und keine labelAngle option ohne ein plugin. Sie müssen mit Hilfe einer Gabel; wo hast du es bekommen?

InformationsquelleAutor Shaggy | 2013-09-05
  1. 13

    Suchen auf Ihrem Diagramm sieht es aus wie Sie sind verwirrt mit flot Bedingungen .Diese sind hilfsstrichbeschriftungen nicht die Achsenbeschriftung.Sie drehen möchten, Ihre ticks dies könnte getan werden, ohne Blick auf Ihre anderen plugin, indem Sie einfach ein paar css-Stil

    #CurrentYearlyTrendsBar div.xAxis div.tickLabel 
{    
    transform: rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

    Können Sie auch Gebrauch machen von flot-tickrotor

    • Ich habe versucht, mit der obigen css, aber dosent Arbeit für mich. Muss ich zum ändern der Diagramm-definition für irgendwelche Optionen? wie entfernen axisLabelUseCanvas: true, labelAngle: -90 von der definition.
    • Hi, zurück, um Sie nach langer Zeit zum gleichen Thema; der style-definition, die Sie gegeben ist, funktioniert nicht im IE 8 & älter. Welche alternativen sollte ich verwenden?
    • Sie sollten überprüfen, IE-Kompatibilität und nutzen Sie Bitte plugin (link )oben.
    • Oh, ja Danke noch einmal. Ich erinnere mich nicht, warum ich halte mich an das css-styling zuvor.
    • problem bei der CSS-Lösung ist, dass der text überlappt die Grafik, auf diese Weise: fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/...
    • Hey buddy Lesen Sie meine Antwort.. ich empfohlen plugin..OP nicht wollen, gehen Sie für es so ich gepostet einfacher workaround
    • Die margin : 3px helfen können !

    InformationsquelleAutor Dipak Ingole
  2. 12

    Hier ist meine Lösung für die rotierende x-Achse die Beschriftung der hilfsstriche.

    .flot-x-axis .flot-tick-label {
    white-space: nowrap;
    transform: translate(-9px, 0) rotate(-60deg);
    text-indent: -100%;
    transform-origin: top right;
    text-align: right !important;

}

    Dieser gab mir dies
    flot-Balken-Diagramm x-Achse Beschriftung mit gedrehtem text von -90 Ausrichtung Ausgabe

    • Problem mit diesem ist, dass, wenn in einem container, die Etiketten werden abgeschnitten oder überlauf...
    InformationsquelleAutor Hiilo
  3. 1

    Hier ist eine verbesserte version der Lösung, die ich verwendet, es vermeidet label abschneiden, einfach durch hinzufügen von height-Eigenschaft:

    .flot-x-axis .flot-tick-label
{
     white-space: nowrap;
     transform: translate(-9px, 0) rotate(-60deg);
     text-indent: -100%;
     transform-origin: top right;
     text-align: right !important;
     height: 40px !important;
}
    InformationsquelleAutor Chapa0001 Chapa0001
Schreibe einen Kommentar