javascript 带有旋转文本的浮动条形图 xaxis 标签 -90 对齐问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18634594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flot bar chart xaxis label with rotated text by -90 alignment issue
提问by Shaggy
I am using flot library to design stacked bar graph, wherein I am using following js files.
我正在使用 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>
With the following script I am defining my bar chart with rotated text of xaxis label by -90 degree.
使用以下脚本，我使用 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();
The problem I am having is with positioning of xaxis labels. xaxis labels are positioned to the left edge of respective bar in chart.
我遇到的问题是 xaxis 标签的定位。xaxis 标签位于图表中相应条形的左边缘。
Please suggest me how can I center align the xaxis labels to the respective bars. Thanks in Advance...
请建议我如何将 xaxis 标签与相应的条形居中对齐。提前致谢...
回答by Dipak Ingole
Looking at your graph it looks like you are confused with flotterms .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
查看您的图表，您似乎对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 */
}
You can also make use of flot-tickrotor
您还可以使用flot-tickrotor
回答by Hiilo
Here's my solution for rotating x-axis tick labels.
这是我旋转 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;
}
This gave me this
这给了我这个
回答by Chapa0001 Chapa0001
Here is an enhaced version of solution that I used, it avoids label truncation simply by adding height property:
这是我使用的解决方案的增强版本，它只需添加高度属性即可避免标签截断：
.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;
}
