带有弯曲网格标记的绘图

Question

我正在尝试为BMI级别创建一个Flot散点图。

如何为肥胖，超重等创建弯曲网格标记以及标签（如下所示）

Answer 1

我不会将这些线视为网格线，而只是绘制其他系列。然后，您可以将它们设计为看起来像网格线。

// function to generate series for each BMI
function genData(bmi){
    var data = [];
    for (var m = 1.3; m < 2.01; m+=0.01){
        data.push([m,bmiEq(bmi,m)]);
    }
    return {color: 'gray', data: data, shadowSize: 0};
}
function bmiEq(bmi,m){
   return bmi * Math.pow(m,2); 
}

var somePlot = $.plot("#container", [ genData(18.5), genData(22), genData(25) ]);

// add some labels on the "grid" lines
var ctx = somePlot.getCanvas().getContext("2d");  //canvas context
var series = somePlot.getData();
var xaxis = somePlot.getXAxes()[0];
var yaxis = somePlot.getYAxes()[0];
var offset = somePlot.getPlotOffset();
ctx.font = "14px 'Segoe UI'";
ctx.fillStyle = "black";
var xPos = xaxis.p2c(1.85)+offset.left;
var yPos = yaxis.p2c(bmiEq(18.5,1.85)) + offset.top;
ctx.fillText('18.5', xPos, yPos);

这会产生（小提琴here）：