web-dev-qa-db-ja.com

Flotデータラベル

Flotを使用して折れ線グラフを作成しようとしていますが、データラベルをグラフに表示したいのです。つまり、各ポイントの値をそのポイントの横に表示します。これはオプションのように思えますが、APIでは見つかりません。私は何かが足りないのですか、それとも誰かが回避策を知っていますか？

前もって感謝します。

flot
37
Zeth

ここに、楽しいアニメーション効果を含めて、この機能を追加した方法を示します。

var p = $.plot(...);

$.each(p.getData()[0].data, function(i, el){
  var o = p.pointOffset({x: el[0], y: el[1]});
  $('<div class="data-point-label">' + el[1] + '</div>').css( {
    position: 'absolute',
    left: o.left + 4,
    top: o.top - 43,
    display: 'none'
  }).appendTo(p.getPlaceholder()).fadeIn('slow');
});

位置を移動してCSSをスタイルシートに表示できます。

44
tom

Flot Googleグループで、必要な機能がリクエストされます here 。実装されたようには見えません（チャート自体の中にラベルを配置することについてはAPIには何もありません）。あなたの質問に対する答えは、いいえ、現時点ではグラフ内の線の特定のポイントの横に値を表示することは不可能だと思います。

Flotの主任開発者であるOle Larson氏は、チャート内のラベルの表示はFLotの他の何よりも異なり、API /プロットパラメータを拡張してそれを行う方法を検討する必要があると述べました。

つまり、 Flotフォーラム に質問を投稿したり、新機能について bug-tracker について提案したりすることができます。 Ole Larsonは、実際にすべての質問、バグ、提案に戻るのが本当に上手です。

10
thewillcole

他の誰かが簡単な解決策を探しているなら、このプラグインを見てください：

http://sites.google.com/site/petrsstuff/projects/flotvallab

9
Ross Martin

flot-valuelabels plugin は 前のflotプラグイン -のフォークであるように見えますが、フォークされたコードはラベルをキャンバスにレンダリングします。プラグインのGithub wikiページ here でこれがどのように見えるかのデモを見ることができます（見た目はとても楽しいようです）。

5
Dan Esparza
function redrawplot() {
   $('.tt1').remove();
   var points = plot.getData();
     var graphx = $('#placeholder').offset().left;
     graphx = graphx + 30; // replace with offset of canvas on graph
     var graphy = $('#placeholder').offset().top;
     graphy = graphy + 10; // how low you want the label to hang underneath the point
     for(var k = 0; k < points.length; k++){
          for(var m = 1; m < points[k].data.length-1; m++){
            if(points[k].data[m][0] != null && points[k].data[m][1] != null){
                  if ((points[k].data[m-1][1] < points[k].data[m][1] && points[k].data[m][1] > points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] < -50 || points[k].data[m][1] - points[k].data[m+1][1] > 50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) - 35,points[k].data[m][1], points[k].color);
              }
                              if ((points[k].data[m-1][1] > points[k].data[m][1] && points[k].data[m][1] < points[k].data[m+1][1]) && (points[k].data[m-1][1] - points[k].data[m][1] > 50 || points[k].data[m][1] - points[k].data[m+1][1] < -50)) {
                                 showTooltip1(graphx + points[k].xaxis.p2c(points[k].data[m][0]) - 15, graphy + points[k].yaxis.p2c(points[k].data[m][1]) + 2,points[k].data[m][1], points[k].color);
                              }
                            }
        }
      }

 }

function showTooltip1(x,y,contents, colour){
  $('<div class=tt1 id="value">' +  contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y,
        left: x,
        'border-style': 'solid',
        'border-width': '2px',
        'border-color': colour,
        'border-radius': '5px',
        'background-color': '#ffffff',
        color: '#262626',
        padding: '0px',
        opacity: '1'
  }).appendTo("body").fadeIn(200);
}
1
Sedrok