logo标签列表

Flot图表中x轴和y轴的标题

jquerygraphflot
8

在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"]
    });
2
除了@Ryley的答案之外，还有一个可用的插件：https://github.com/markrcote/flot-axislabels - Mark
@Mark - 把它变成一个答案，我会投票支持的 :) - Ryley
2个回答
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，不幸的是，有更多的技巧需要处理-您需要通过执行以下操作将body标签标记为“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和为x轴指定一个固定的labelHeight。

在此处查看一个可工作的示例：http://jsfiddle.net/ryleyb/U82Dc/

5
1
谢谢 @cederlof，您救了我的一天。Bimal，这个插件有些老旧并且存在一些问题，我通过使用github.com/markrcote/flot-axislabels解决了我的问题。 - Asnad Atta
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接