如何使用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 fill并在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。