如何用flot只繪制點（不是線條）？

Question

最終，我正在追尋一個非常小的一維圖表，如下所示：

軸

• X軸：0到100，不可見
• Y軸：0到0（但繪制三條線可能需要-1到1）

數據

• 僅限積分。 沒有線條。
• 需要對兩個數據集進行不同的着色（首選紅色和綠色）。
• x軸上的所有數據（y = 0）
• 如果形狀可能，X和O將是完美的

飛機

• 我需要在x軸上的特定點繪制三條線，而不是標准網格。
  例：

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

這是我到目前為止所嘗試的：

d1 = [[48,0],[16,0],[10,0],[40,0],[30,0],[37,0]];
d2 = [[43,0],[60,0],[74,0],[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, ticks: false, tickColor: 'transparent' },
        grid: { show:false }
    };
var data = [
        { data: d1, points: { color: '#E07571', fillcolor: '#E07571' } },
        { data: d2, points: { color: '#FDEDB2', fillcolor: '#FDEDB2' } }
    ];
$.plot($('#placeholder'), data, options);

問題：

• 顏色不起作用
• 無法弄清楚如何繪制飛機

Answer 1

這是一個快速模擬復制你的圖片：

d1 = [[48,0],[16,0],[10,0],[40,0],[30,0],[37,0]];
d2 = [[43,0],[60,0],[74,0],[83,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 }, color:"black" }, 
              { xaxis: { from: 60, to: 60 }, color:"black" }
            ]  
     }              
};

xCallBack = function (ctx, x, y, radius, shadow) {
   ctx.arc(x, y, radius, 0,  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, x, y, radius, shadow) {
   ctx.arc(x, y, radius, 0,  Math.PI * 2, false);
   var text = '✓'
   var metrics = ctx.measureText(text);
   ctx.font="15px Arial";
   ctx.fillStyle = "green";
   ctx.fillText(text,x-metrics.width/2,y+4);
}

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

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

在這里小提琴

Answer 2

你其實已經非常接近了。

顏色不起作用，因為顏色是系列的屬性，而不是series.points。 您只需要將數據與數據一起上移一級。 fillColor選項不起作用，因為'c'需要大寫。

對於垂直線，請使用標記，如自定義網格中所述 ：

grid: {
    show: true,
    color: "transparent",
    markings: [
        { xaxis: { from: 20, to: 20 }, color: "#888", lineWidth: 5 }
    ]
}

要繪制更復雜的點符號，請查看符號插件 。 它允許您定義自定義回調以繪制自己的符號。