nhãn biểu đồ thanh flot nhãn xaxis với văn bản xoay theo -90 sự cố liên kết

Question

Tôi đang sử dụng thư viện flot để thiết kế biểu đồ thanh xếp chồng lên nhau, trong đó tôi đang sử dụng các tệp js sau.

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

Với tập lệnh sau, tôi xác định biểu đồ thanh có văn bản xoay xaxis bằng -90 độ.

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

Vấn đề tôi đang gặp phải là định vị nhãn xaxis. nhãn xaxis được đặt ở cạnh trái của thanh tương ứng trong biểu đồ.

Vui lòng đề nghị tôi làm cách nào để căn giữa căn chỉnh nhãn xaxis với các thanh tương ứng. Thanks in Advance ...

Answer 1

Nhìn vào biểu đồ của bạn có vẻ như bạn đang bối rối với các điều khoản flot.Đó là các nhãn đánh dấu không phải là nhãn trục.Bạn muốn xoay các dấu tích này có thể được thực hiện mà không cần nhìn vào bất kỳ Plugin bằng cách đơn giản thêm một số phong cách 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 */ 
} 

Bạn cũng có thể tận dụng flot-tickrotor

Answer 2

đây là giải pháp của tôi về luân nhãn đánh dấu trục 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; 

} 

này đã cho tôi này