Flot图中x和y轴的标题

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

来源

2012-12-11 user1871640

除了@ Ryley的回答，还有一个插件可用：https://github.com/markrcote/flot-axislabels – Mark

@Mark - 作出答案，我会投它:) – Ryley

海军报本身并不支持轴标签，但你可以使用HTML和CSS，有点修饰你的海军报的选择很简单的添加他们。

flot site上的演示具有y轴标签。它是通过附加一定的阶级一个div到海军报容器创建：

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，并为xax指定一个固定的labelHeight。

看到这里工作的例子：http://jsfiddle.net/ryleyb/U82Dc/

来源

2012-12-11 17:18:05 Ryley

没有为这里海军报出一个插件：https://github.com/mikeslim7/flot-axislabels实现轴标签。

但是，它在IE浏览器中不支持版本9.0以下。 @Ryley的解决方案是一个很酷的解决方案。

来源

2013-01-08 09:46:21 Bimal

这个插件是更近期的：https：//github.com/markrcote/flot-axislabels – cederlof

谢谢@cederlof你救了我的一天Bimal这个插件是旧的，有一些问题，我的问题通过使用github.com/markrcote/flot-axislabels解决 –

Flot图中x和y轴的标题

回答

相关问题