最终,我正在追寻一个非常小的一维图表,如下所示：
轴
> 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);
问题：
>颜色不起作用
>无法弄清楚如何绘制飞机
最佳答案
这是一个快速模拟复制你的图片：
原文链接：https://www.f2er.com/jquery/428729.htmld1 = [[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.
