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

@マーク - それを答えてください、私はそれに投票します:) – Ryley

FLOTは、それ自体で軸ラベルをサポートしていませんが、あなたはかなり簡単にHTMLとCSS、そしてあなたのFLOTオプションへの変更のビットを使用してそれらを追加することができます。

flot siteのデモには、y軸のラベルが付いています。

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を必要とする：それはFLOTコンテナに特定のクラスを持つdiv要素を追加することによって作成され

.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軸にfixed labelWidth、xaxisにfixed labelHeightを指定する必要があることがわかりました。ここFLOTアウト用のプラグインがありhttp://jsfiddle.net/ryleyb/U82Dc/

出典

2012-12-11 17:18:05 Ryley

：https://github.com/mikeslim7/flot-axislabelsは、軸ラベルを実装する

はここで働く例を参照してください。

ただし、バージョン9.0未満のIEブラウザではサポートされていません。 @ Ryleyのソリューションはクールです。

出典

2013-01-08 09:46:21 Bimal

このプラグインもっと最近のものです：https://github.com/markrcote/flot-axislabels – cederlof

あなたは私の日を救った@cederlofこのプラグインは古く、いくつかの問題を抱えています。github.com/markrcote/flot-axislabelsを使って私の問題を解決しました。 –

Flotグラフのx軸とy軸のタイトル

答えて

関連する問題