如何在我的圖表中使用jQuery.flot.js填充文本點？

Question

我使用flot畫出我的表，我想借鑑一下，有一些文字的圓我的數據，我用符號屬性在一點上，我的代碼是這樣的：

points: { 
        show: true, 
        symbol: self.drawSymbol, 
        fillColor: 'blue' 
       }, 
drawSymbol: function(ctx, x, y, radius, shadow) { 
     ctx.arc(x, y, 15, 0, 2 * Math.PI, false); 
     ctx.fill('65kg',x,y); 
    }, 

這還不是全部的代碼中， drawSymbol方法在每次調用繪製我的數據，我的圖表沒有顯示我的期望，

你看，對文本涵蓋了一圈，怎麼會這樣呢？

如何在我的觀點上畫一段文字？

有沒有其他解決方案？

Answer 1

在flots點繪製例程中，它調用自定義符號函數（在您的情況下寫入文本），然後（在頂部）它用藍色填充符號。要做你想做的事情，你必須先禁用flots填寫並填寫你的drawSymbol，然後再編寫文本。

在你的選擇：

points: { 
    show: true, 
    symbol: drawSymbol, 
    fill: false // disable flots fill 
}, 

並修改drawSymbol到：

var drawSymbol = function(ctx, x, y, radius, shadow) { 
    ctx.arc(x, y, 15, 0, 2 * Math.PI, false); 
    ctx.fillStyle = "blue"; 
    ctx.fill(); // fill it yourself 
    ctx.font = "12px 'Segoe UI'"; 
    ctx.fillStyle = "white"; 
    ctx.textAlign = 'center'; 
    ctx.fillText('65kg', x, y + 4); //now the text 
} 

這裏有一個小提琴demonstration。

要drawSymbol訪問您的數據：

var drawSymbol = function(ctx, x, y, radius, shadow) { 
    // keep track of how many times you've called this 
    if (this.numCalls == undefined){ 
     this.numCalls = -1; 
    } 
    this.numCalls++; 
    // flot "over" draws 
    // so always keep the index correct... 
    if (this.numCalls >= someData[0].data.length){ 
     this.numCalls = this.numCalls - someData[0].data.length; 
    } 
    //console.log(this.numCalls); 
    ctx.arc(x, y, 15, 0, 2 * Math.PI, false); 
    ctx.fillStyle = "blue"; 
    ctx.fill(); 
    ctx.font = "12px 'Segoe UI'"; 
    ctx.fillStyle = "white"; 
    ctx.textAlign = 'center'; 
    // access your data point 
    ctx.fillText(someData[0].data[this.numCalls][3]+'kg', x, y + 4); 
} 

更新fiddle here。