float 条形图 xaxis 标签，文本旋转 -90 度对齐问题

我正在使用 flot 库来设计堆叠条形图，其中我使用以下 js 文件。

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

使用以下脚本，我使用 xaxis 标签旋转 -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();

我遇到的问题是 x 轴标签的定位。 x 轴标签位于图表中相应条形的左边缘。

请建议我如何将 x 轴标签与相应的条形居中对齐。 提前致谢...

看看你的图表，你似乎很困惑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 and Chrome */
    -o-transform:rotate(-90deg); /* Opera */
    /*rotation-point:50% 50%;*/ /* CSS3 */
    /*rotation:270deg;*/ /* CSS3 */
}

您还可以使用浮标转子