jquery – Flot图中x和y轴的标题

是否可以在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"]
    });

解决方法

Flot本身不支持轴标签,但您可以使用html和css轻松添加它们,并对您的flot选项进行一些修改.

flot site上的演示有一个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/

jquery – Flot图中x和y轴的标题

解决方法

相关文章