37

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

前もって感謝します。

4

5 に答える 5

45

快適なアニメーション効果を含む機能を追加した方法は次のとおりです。

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をスタイルシートに表示できます。

于 2010-04-08T15:25:11.063 に答える
10

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

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

そうは言っても、Flot フォーラムに質問を投稿したり、新機能のバグトラッカーに提案したりすることをお勧めします。Ole Larson は実際、すべての質問、バグ、提案に自分自身で答えるのが得意です。

于 2009-07-23T23:24:07.997 に答える
9

他の誰かが簡単な解決策を探している場合は、次のプラグインを参照してください。

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

于 2010-02-17T00:11:13.257 に答える
5

flot-valuelabels プラグインは以前のflot プラグインのフォークのようですが、フォークされたコードはキャンバスにラベルをレンダリングします。プラグインの Github wiki ページ (こちら) で、これがどのように見えるかのデモを見ることができます(見た目は非常に魅力的です)。

于 2010-12-02T20:37:34.203 に答える
1 
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);
}
于 2013-02-01T10:22:57.930 に答える