javascript - 带有旋转文本的浮动条形图xaxis标签-90对齐问题

Question

我正在使用 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();

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

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

Answer 1

查看您的图表，您似乎对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 */
}

您还可以使用flot-tickrotor

Answer 2

这是我旋转 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;

}

这给了我这个

Answer 3

这是我使用的解决方案的增强版本，它通过添加 height 属性来避免标签截断：

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