javascript – 如何用flot只绘制点(不是线条)？

最终,我正在追寻一个非常小的一维图表,如下所示：

轴

> X轴：0到100,不可见
> Y轴：0到0(但绘制三条线可能需要-1到1)

数据

>仅限积分.没有线条.
>需要对两个数据集进行不同的着色(首选红色和绿色).
> x轴上的所有数据(y = 0)
>如果形状可能,X和O将是完美的

飞机

>我需要在x轴上的特定点绘制三条线,而不是标准网格.
例：

[[40,-1],[40,1]],[[50,[50,[[60,[60,1]]

这是我到目前为止所尝试的：

d1 = [[48,0],[16,[10,[30,[37,0]];
d2 = [[43,[74,[83,0]];
var options = {
        points: { show: true,fill: true,radius: 5 },lines: { show: false,fill: true },xaxis: { show: false,min:0,max:100,ticks: false,tickColor: 'transparent' },yaxis: { show: false,min:-1,max:1,grid: { show:false }
    };
var data = [
        { data: d1,points: { color: '#E07571',fillcolor: '#E07571' } },{ data: d2,points: { color: '#FDEDB2',fillcolor: '#FDEDB2' } }
    ];
$.plot($('#placeholder'),data,options);

问题：

>颜色不起作用
>无法弄清楚如何绘制飞机

最佳答案

这是一个快速模拟复制你的图片：

d1 = [[48,0]];
var options = {
    points: { show: true,radius: 10,lineWidth: 4,fill: false },lines: { show: false },xaxis: { show: false },yaxis: { show: false },grid: { show:true,color: "transparent",markings: [ 
              { xaxis: { from: 40,to: 40 },color:"black" },{ xaxis: { from: 50,to: 50 },{ xaxis: { from: 60,to: 60 },color:"black" }
            ]  
     }              
};

xCallBack = function (ctx,x,y,radius,shadow) {
   ctx.arc(x,Math.PI * 2,false);
   var text = 'X'
   var metrics = ctx.measureText(text);
   ctx.font="15px Arial";
   ctx.fillStyle = "red";
   ctx.fillText(text,x-metrics.width/2,y+4);
}

checkCallBack = function (ctx,false);
   var text = '✓'
   var metrics = ctx.measureText(text);
   ctx.font="15px Arial";
   ctx.fillStyle = "green";
   ctx.fillText(text,y+4);
}

var data = [
    { data: d1,color: 'red',points: {symbol: xCallBack } },color: 'green',points: {symbol: checkCallBack }}
];

$.plot($('#placeholder'),options);

小提琴here.