flot条形图xaxis标签与旋转文本-90对齐问题

问题描述

 看看你的图，看起来你很迷惑 flot 这些术语。它们是刻度标签，而不是轴标签。您想旋转刻度，只需添加一些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和Chrome * / 
 -o-transform：rotate（-90deg）; / * Opera * / 
 / *旋转点：50％50％; * / / * CSS3 * / 
 / * rotation：270deg; * / / * CSS3 * / 
} 
  
您也可以使用 
 
I am using flot library to design stacked bar graph, wherein I am using following js files.
<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>
With the following script I am defining my bar chart with rotated text of xaxis label by -90 degree.
 $.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();
The problem I am having is with positioning of xaxis labels. xaxis labels are positioned to the left edge of respective bar in chart.
Please suggest me how can I center align the xaxis labels to the respective bars.Thanks in Advance...
 解决方案 
Looking at your graph it looks like you are confused with flot terms .Those are tick labels not the axis label.You want to rotate your ticks this could be done without looking at your any other plugin by simply adding some css style
#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 */
}
You can also make use of flot-tickrotor
                        
这篇关于flot条形图xaxis标签与旋转文本-90对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！