flot bar chart xaxis etykieta z obróconym tekstem o -90 wyrównanie wydanie

Używam biblioteki flot do projektowania skumulowany wykres słupkowy, w którym używam następujących plików js.flot bar chart xaxis etykieta z obróconym tekstem o -90 wyrównanie wydanie

<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>

Przy pomocy poniższego skryptu definiuję wykres słupkowy z obróconym tekstem etykiety xaxis o -90 stopni.

$.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();

Problem, który mam z pozycjonowaniem etykiet xaxis. Etykiety xaxis są umieszczone na lewej krawędzi odpowiedniego paska na wykresie.

Proszę zasugerować, w jaki sposób wyśrodkować etykietę xaxis do odpowiednich pasków. z góry dzięki ...

Źródło

2013-09-05 Shaggy

Czy możesz opisać swój problem z obrazem lub skrzypce? –

Flot nie obsługuje jeszcze etykiet z obróconą osią; jakiej wtyczki używasz do tego? Jaką wersję Flota używasz? – DNS

@captain Nie mogę dodać obrazu, o którym mowa, ze względu na minimalne ograniczenie reputacji przez stackoverflow i nie używałem jeszcze skrzypka. Czy możesz mi podpowiedzieć, jak mogę dołączyć obraz do pytania: – Shaggy

Patrząc na wykresie wygląda na to są mylone z flot względem .Those są tick etykietami oś label.You chcą obracać kleszczy można to zrobić bez patrzenia na dowolny inny wtyczka poprzez dodanie niektórych stylów CSS

#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 */ 
}

można również skorzystać z flot-tickrotor

Źródło

2013-09-05 14:34:30

Próbowałem używać powyższych css, ale dosent pracy dla mnie. Czy muszę zmodyfikować definicję wykresu dla jakichkolwiek opcji? jak usuwanie axisLabelUseCanvas: true, labelAngle: -90 z definicji. – Shaggy

Witam, wracam do ciebie po długim czasie na ten sam problem; podana definicja stylu nie działa w IE 8 i starszym. Jakiej alternatywy powinienem użyć? – Shaggy

Powinieneś sprawdzić kompatybilność IE i użyj wtyczki (link) powyżej. –

Oto moje rozwiązanie do obracania etykiet podziałki osi x.

.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; 

}

Dało mi to

Źródło

2016-05-13 11:46:37 Hiilo

Problem polega na tym, że jeśli w pojemniku etykiety zostaną obcięte lub przepełnione ... –

flot bar chart xaxis etykieta z obróconym tekstem o -90 wyrównanie wydanie

Odpowiedz

Powiązane problemy