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;

}

这给了我这个

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

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

3 个答案: