是否可以在flot图中显示x和y轴的标题？
以下是代码:
$.plot($("#placeholder_1w"), [d], {
series: {
lines: { show: true, fill: false, fillColor: "red" },
points: { show: true, fill: true,fillColor: "red" }
},
grid: { hoverable: true, clickable: true , color: 'green'},
xaxis: {
mode: "time",
minTickSize: [1, "day"],
min: (myWeekDate).getTime(),
max: (new Date()).getTime()
},
colors: ["red", "green", "#919733"]
});
Ryl*_*ley 16
Flot本身不支持轴标签,但您可以使用html和css轻松添加它们,并对您的flot选项进行一些修改.
flot站点上的演示有一个y轴标签.它是通过将具有某些类的div附加到flot容器来创建的:
var xaxisLabel = $("<div class='axisLabel xaxisLabel'></div>")
.text("My X Label")
.appendTo($('#placeholder_1w'));
var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
.text("Response Time (ms)")
.appendTo($('#placeholder_1w'));
然后,你需要像这样的CSS:
.axisLabel {
position: absolute;
text-align: center;
font-size: 12px;
}
.xaxisLabel {
bottom: 3px;
left: 0;
right: 0;
}
.yaxisLabel {
top: 50%;
left: 2px;
transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
如果你需要支持IE6/7,不幸的是还有更多的技巧要处理 - 你希望你的身体标签用"ie6"或"ie7"类标记,做这样的事情:
<!--[if IE 6]><body class="ie ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7"><![endif]-->
<!--[if IE 8]><body class="ie ie8"><![endif]-->
<!--[if IE 9]><body class="ie ie9"><![endif]-->
<!--[if gt IE 9]><body class="ie"><![endif]-->
<!--[if !IE ]><!--><body><!--<![endif]-->
然后这个额外的CSS:
.ie7 .yaxisLabel, .ie8 .yaxisLabel {
top: 40%;
font-size: 36px;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.0, M12=0.33, M21=-0.33, M22=0.0,sizingMethod='auto expand');
}
最后,在我尝试这样做时,我发现我需要为y轴指定固定的labelWidth,为xaxis指定固定的labelHeight.
在这里查看一个工作示例:http: //jsfiddle.net/ryleyb/U82Dc/
这里有一个flot插件:https://github.com/mikeslim7/flot-axislabels来实现轴标签.
但是,在低于9.0的IE浏览器中不支持它.@Ryley的解决方案很酷.