flot条形图xaxis标签与旋转文本-90对齐问题 [英] flot bar chart xaxis label with rotated text by -90 alignment issue

问题描述

 < script src 
 
我使用flot库来设计堆叠条形图，其中我使用了以下js文件。 = @ Url.Content（ 〜/脚本/图表/ excanvas.js ） >< /脚本> 
< script src =@ Url.Content（〜/ Scripts / charts / jquery.flot.js）>< / script> 
< script src =@ Url.Content（〜/ Scripts / charts / jquery.flot.symbol.js）>< / script> 
  

通过以下脚本，我将-x轴标签的旋转文本定义为-90度。

  $ .each（数据，函数（索引，项）{
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标签对齐到相应的条。
在此先感谢...

解决方案看看你的图，看起来你很迷惑 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和Chrome * / 
 -o-transform：rotate（-90deg）; / * Opera * / 
 / *旋转点：50％50％; * / / * CSS3 * / 
 / * rotation：270deg; * / / * CSS3 * / 
} 
  

您也可以使用 flot-tickrotor

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

解决方案

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

这篇关于flot条形图xaxis标签与旋转文本-90对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！