5

最终，我追求的是一个非常小的一维图表，如下所示：

简单线图

轴

  • 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);

问题：

  • 颜色不起作用
  • 不知道怎么画飞机
4

2 回答 2

7

这是一个复制您的图片的快速模型：

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);

在这里拉小提琴。

在此处输入图像描述

于 2013-10-24T13:49:44.513 回答
4

你实际上已经很接近了。

颜色不起作用，因为颜色是系列的属性，而不是 series.points。您只需将其与数据一起提升一个级别。fillColor 选项不起作用，因为 'c' 需要大写。

对于垂直线，使用标记，如自定义网格中所述：

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

要绘制更复杂的点符号，请查看Symbols Plugin。它允许您定义自定义回调来绘制您自己的符号。

于 2013-10-24T13:38:28.280 回答