flot条形图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标签位于图表中相应条形的左边缘.

请建议我如何将x轴标签对齐到相应的条形图.提前致谢...

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;

}

这给了我这个