草庐IT

javascript - 我怎样才能用 flot 只绘制点(而不是线)？

coder 2025-02-23 原文

最终我想要一个像这样的非常小的一维图表:

坐标轴

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

问题:

  • 颜色不合适
  • 不会画飞机

最佳答案

这是复制您图片的快速模型:

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

fiddle here .

关于javascript - 我怎样才能用 flot 只绘制点(而不是线)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19556722/

javascriptflotstrongfalse39jquerychartsplot

有关javascript - 我怎样才能用 flot 只绘制点(而不是线)？的更多相关文章

  1. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  2. ruby-on-rails - 如果我将 ruby​​ 版本 2.5.1 与 rails 版本 2.3.18 一起使用会怎样？ - 2

    如果我使用ruby​​版本2.5.1和Rails版本2.3.18会怎样？我有基于rails2.3.18和ruby​​1.9.2p320构建的rails应用程序，我只想升级ruby的版本，而不是rails，这可能吗？我必须面对哪些挑战？ 最佳答案 GitHub维护apublicfork它有针对旧Rails版本的分支，有各种变化，它们一直在运行。有一段时间，他们在较新的Ruby版本上运行较旧的Rails版本，而不是最初支持的版本，因此您可能会发现一些关于需要向后移植的有用提示。不过，他们现在已经有几年没有使用2.3了，所以充其量只能让更

  3. 怎样用一台手机做自媒体？ - 2

    其实做自媒体的成本并不高，入门只需要一部手机即可！在手机上找视频素材、使用手机剪辑视频、最后使用手机发布视频作品获得收益！方法并不难，今天这期内容就来给粉丝们分享一种小方法，每天稳定收益100-300，抓紧点赞收藏！1、找素材（1）使用手机拍摄自己喜欢的经典段落，使用程序把文案内容提取出来（2）也可以在豆瓣、知乎、微博等网站中找一些自己需要的文案素材（3）把文案进行润色修改，可以加入一些自己的观点（4）视频素材可以使用软件中自带的素材，也可以在素材网站中下载完整版的素材2、文案配音（1）把复制好的文案直接导入小程序中（2）调整音色、音调后一键合成音频即可（3）可以选择自己朗读配音，需要花一点时

  4. 【Java 面试合集】HashMap中为什么引入红黑树，而不是AVL树呢 - 2

    HashMap中为什么引入红黑树，而不是AVL树呢1.概述开始学习这个知识点之前我们需要知道，在JDK1.8以及之前，针对HashMap有什么不同。JDK1.7的时候，HashMap的底层实现是数组+链表JDK1.8的时候，HashMap的底层实现是数组+链表+红黑树我们要思考一个问题，为什么要从链表转为红黑树呢。首先先让我们了解下链表有什么不好？？？2.链表上述的截图其实就是链表的结构，我们来看下链表的增删改查的时间复杂度增：因为链表不是线性结构，所以每次添加的时候，只需要移动一个节点，所以可以理解为复杂度是N(1)删：算法时间复杂度跟增保持一致查：既然是非线性结构，所以查询某一个节点的时候

  5. ruby - 我怎样才能只写一次 "Text"并同时检查 path_info 是否包含 'A' ？ - 2

    -if!request.path_info.include?'A'%{:id=>'A'}"Text"-else"Text"“文本”写了两次。我怎样才能只写一次并同时检查path_info是否包含“A”？ 最佳答案 有两种方法可以做到这一点。使用部分，或使用content_forblock:如果“文本”较长，或者是一个重要的子树，您可以将其提取到一个部分。这会使您的代码变干一点。在给出的示例中，这似乎有点矫枉过正。在这种情况下更好的方法是使用content_forblock，如下所示:-if!request.path_info.inc

  6. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - rspec - 我怎样才能让 "pendings"有我的文本而不仅仅是 "No reason given" - 2

    我有这个代码:context"Visitingtheusers#indexpage."dobefore(:each){visitusers_path}subject{page}pending('iii'){shouldhave_no_css('table#users')}pending{shouldhavecontent('Youhavereachedthispageduetoapermissionic错误')}它会导致几个待处理，例如ManagingUsersGivenapractitionerloggedin.Visitingtheusers#indexpage.#Noreason

  8. ruby-on-rails - 只有当不是 nil 时才执行映射？ - 2

    如果names为nil，则以下中断。我怎样才能让这个map只有在它不是nil时才执行？self.topics=names.split(",").mapdo|n|Topic.where(name:n.strip).first_or_create!end 最佳答案 其他几个选项:选项1(在其上执行map时检查split的结果):names_list=names.try(:split,",")self.topics=names_list.mapdo|n|Topic.where(name:n.strip).first_or_create!e

  9. ruby-on-rails - Rails 格式验证——字母数字，但不是纯数字 - 2

    什么是测试格式验证的最佳方法让我们说一个用户名，使用字母数字的正则表达式，但不是纯数字？我一直在我的模型中使用以下验证validates:username,:format=>{:with=>/^[a-z0-9]+[-a-z0-9]*[a-z0-9]+$/i}数字用户名(例如“342”)通过了验证，这是我不想要的。 最佳答案 您想“向前看”一封信:/\A(?=.*[a-z])[a-z\d]+\Z/i 关于ruby-on-rails-Rails格式验证——字母数字，但不是纯数字，我们在Sta

  10. ruby - 为什么必须明确指定 2 个参数才能 curry :> - 2

    考虑这个，它工作正常::>.to_proc.curry(2)[9][8]#=>true,because9>8然而，即使>是一个二元运算符，如果没有指定的元数，上面的代码将无法工作::>.to_proc.curry[9][8]#=>ArgumentError:wrongnumberofarguments(0for1)为什么两者不等价？注意:我特别想用提供的一个参数创建中间柯里化(Currying)函数，然后然后调用然后用第二个参数调用它。 最佳答案 curry必须知道传入的过程的数量，对吧？:-1来自arity的负值令人困惑，但基本上

随机推荐