我正在使用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轴标签对齐到相应的条形图。 在此先感谢...
答案 0 :(得分:12)
查看你的图表,看起来你对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
答案 1 :(得分:11)
这是我的旋转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;
}
答案 2 :(得分:1)
这是我使用的解决方案的增强版本,它只需添加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;
}