flot bar chart xaxis label with rotated text by -9

问题:

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

回答1:

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

回答2:

Here's my solution for rotating x-axis tick labels.

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

}

This gave me this

回答3:

Here is an enhaced version of solution that I used, it avoids label truncation simply by adding height property:

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