Flot:如何在条形图中设置数字样式?

2024-01-05

我在用着流程图 http://www.flotcharts.org/它是插件Flot.barnumbers (Demo http://joetsoi.github.io/flot-barnumbers/) 显示图表。

我需要在栏中显示数字,它可以工作。不幸的是,我不知道如何设计数字的样式,并且无法在文档中或通过 Google 找到任何内容。

我想使用类似的东西(显然不可能):

bars: {
    numbers: {
        numberFormatter: function(v, bar) {
            return '<div class="pimp-my-number-class">'+ v +'</div>';               
        }
    }
}

有谁知道如何解决这个问题?

提前致谢!


最好的事情之一flot是它提供了基础知识,然后就不妨碍你了。这是一个我自己实现的快速代码示例(即没有插件)。 http://jsfiddle.net/x4bgU/1它简短而甜蜜,你可以完全控制外观。

$(function() {

    dsHook = function(plot, canvascontext, series){
        for (var i = 0; i < series.data.length; i++){ // loop the series
           var offset = plot.offset(); // offset of canvas to body
           var dP = series.data[i]; // our data point
           var pos = plot.p2c({x: dP[0], y: dP[1]}); // position of point           
           var barWidth = plot.p2c({x: dP[0]+series.bars.barWidth, y: dP[1]}).left - pos.left; // calc width of bar
           pos.left += offset.left; pos.top += offset.top; //adjust position for offset
           var aDiv = $('<div></div>').css({'width':barWidth, 'background-color':'green','color':'white','text-align':'center','position':'absolute','left': pos.left,'top':pos.top}).text(dP[1]).appendTo("body"); // add an absolute div with the number
        }
    }

    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

    somePlot = $.plot("#placeholder", [{
            data: d2,
            bars: { show: true }
        }],
        { hooks: { drawSeries: [dsHook] } }
    );
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flot:如何在条形图中设置数字样式? 的相关文章

  • websockets 如何处理同一浏览器的两个选项卡

    I have 1 个 PHP 服务器 提供 http 请求 和 1 node js 发布更新的数据消息 每个连接都带有 websocket php 服务器设置其 cookie 在一个浏览器中 此 cookie 可在所有选项卡中使用 当浏览器
  • 使用javascript以编程方式触发iOS safari中的复制菜单?

    我正在尝试实现一种用户友好的方式 将一些文本从文本输入字段复制到 iOS Safari 上的剪贴板 我知道无法在这个平台上以编程方式完成此操作 但我希望能够尽可能地指导用户体验 在 iOS Safari 上 当用户手动突出显示某些文本时 会
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • jquery 中的函数返回未定义[重复]

    这个问题在这里已经有答案了 我在 jquery 中调用的函数返回未定义 我检查了该函数 当我对其进行调试时 它返回正确的数据 function addToPlaylist component type add to pl value pl
  • Firefox Addon 中的 JQuery 导致多个警告

    我在 Firefox 插件中使用 jquery 但我不断收到大量警告消息 如下所示 anonymous function does not always return a value System JS WARNING resource g
  • 返回视图作为 JSON 对象的一部分

    我有一个应用程序只加载一次完整视图 我这样做的原因并不重要 重要的是 其余内容只会以部分视图的形式返回 除了一些内容之外 我还有一些 JSON 对象 我想通过每个 AJAX 请求在服务器之间来回传递 有没有办法返回一个 JSON 对象 并将
  • Chrome --app 相当于 Firefox\IE

    我有一个网络应用程序 客户要求单击不同按钮时更改浏览器窗口大小 我发现在那link https stackoverflow com questions 13436855 launch google chrome from the comma
  • 从链接打开本地文件夹

    如何通过单击任何链接打开本地文件夹视图 我尝试了很多选择 例如 a href Open folder a or a Open folder a or a Open folder a 解决方案 启动可下载链接 以下内容适用于所有浏览器 但一如
  • ES6 模块范围

    我有代码 lib js var a a export var b b main js console log a a variable is not available in a global scope import b from lib
  • 如何在React中动态分配属性?

    这是一个有两个参数的函数 我要创建的标签的名称 具有以下属性的对象 Using React 我创建一个组件并将该元素渲染到 DOM 问题是我想向元素添加属性 但它不允许循环在元素内设置属性 var Element function elem
  • 从字节数组设置 img src

    我需要设置img src我在对象中拥有的字节数组的属性 img
  • Angular JS - 使服务可以从控制器和视图全局访问

    假设我们有以下服务 myApp factory FooService function 然后 从控制器中 我会说 myApp controller FooCtrl scope FooService function scope FooSer
  • 如何从 CSS 选择器中提取类名?

    故事 我目前正在构建一个 ESLint 规则 以警告在 CSS 选择器定位器中使用引导布局导向和角度技术类 目前我在字符串方法中使用简单的子字符串 for var i 0 i lt prohibitedClasses length i if
  • Firebase + Node.js:错误:找不到 XMLHttpRequest 兼容性库

    Firebase Node js On iOS 安装的 Node js npm 安装 firebase save 节点测试 js 其中 test js 是一个非常简单的连接到 Firebase 的脚本 var firebase requir
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • Google Apps 脚本中 $.ajax() 的服务器端等效项是什么?

    我想在 Google App 脚本中从服务器端代码执行 HTTP 请求Authorization标头 是否有用于发送 HTTP 请求的 App Script API Google Apps 脚本中的这段代码相当于什么 var api URL
  • 为什么这些内联块元素会产生额外的宽度?

    这是这个问题的后续内容 仅使用 css 自动调整图像下的文本 https stackoverflow com questions 34185547 autofit text under image with only css 为什么这段代码
  • onPress 方法中箭头函数与普通函数的行为

    正在学习 Native React 并学习更多关于 javascript 的知识 所以我仍然不明白它的行为的很多事情 我使用 TouchableOpacity 及其 onPress 属性创建了一个按钮组件 为了让它工作 我必须发送我想要执行
  • 如何在 TypeScript 中使用 navigation.replace ?

    我试图在我的代码中使用它 const navigation useNavigation navigation replace AllFriends 但我不断收到错误消息 Property replace does not exist on
  • Cycle2 初始化事件未触发

    我使用 Cycle2 作为基本的轮播 我的幻灯片项目有时在其数据中包含一个 url 因此我必须使用 Cycle2 api 事件来使用该 url 当它存在时 我的问题是 虽然 cycle after 事件触发正常 但初始化事件都不会触发 因此

随机推荐

  • 使用 OCR python 读取图像上的数字

    我正在尝试使用 Python 和 tesseract 中的 OpenCV 提取图像上的数字 这是我的尝试 但我什么也没得到 该代码没有返回预期的数字 import fitz pytesseract os re import cv2 sTem
  • 如何设置Android应用程序的默认语言?

    我用两种语言创建了一个应用程序 第二个 英语 当用户的默认系统语言是英语时使用 如果不是 则使用第一个 我想将第二语言 即英语 设置为默认语言 这意味着当用户打开我的应用程序并且他的系统语言不是第一个语言 也不是英语时 英语将显示为默认语言
  • GSON解析未指定类型变量

    我使用 GSON 库解析服务器 JSON 响应 后端人员有时会告诉我 出于某种原因 我们无法在 JSON 中指定变量类型 旧的 php 他们不知道如何做到这一点等等 GSON 喜欢在其对象模型中使用强类型 所以我无法将对象解析为字符串 GS
  • 有没有办法让 puppeteer 的 waitUntil “networkidle” 只考虑 XHR (ajax)请求?

    我正在使用 puppeteer 来评估我的测试应用程序中基于 javascript 的网页 HTML 这是我用来确保加载所有数据的行 await page setRequestInterception true page on reques
  • RecyclerView LinearLayoutManager 设置项目计数

    在 GridLayoutManager 中 我可以设置跨度计数 这使得视图内的项目调整大小以能够水平适应该跨度计数 我有一个 LinearLayoutManager 我想以同样的方式使用它 有固定数量的可见项目并调整它们的大小以适应 我在同
  • 如何在Windows中使用RMySQL?

    我尝试使用 RMySQL 包 但出现此错误 install packages RMySQL Warning in install packages package RMySQL is not available for R version
  • 只允许用户投票一次。姜戈

    我有什么models py class Poll models Model question models CharField max length 200 pub date models DateTimeField date publis
  • 将字符串数组从 C# 返回到 Inno Setup

    我在用着非托管导出 NuGet https www nuget org packages UnmanagedExports来自 Robert Giesecke 并在 C 中有以下方法 DllExport DummyMethod Callin
  • Go中函数名之前的参数? [复制]

    这个问题在这里已经有答案了 我见过一些像这样定义的 Go 函数 type poly struct coeffs 256 uint16 func p poly reset for i range p coeffs p coeffs i 0 您
  • readString 仅当 CurrentBSONType 为 STRING 时才能调用,而当 CurrentBSONType 为 OBJECT_ID 时则不能调用

    我收到以下错误 在读取 POJO 时 我能够成功插入 更新和删除 我们正在使用 mongodb driver reactivestreams 1 9 0 org bson codecs configuration CodecConfigur
  • 致命错误:找不到“stdafx.h”文件

    我是 C 编程新手 正在尝试通过网站 learncpp com 自学 尽管我已经坚持编译我的第一个程序 他们使用 Visual Studio 来编程他们的代码 因为我使用的是 macbook 我只是使用 vi 和终端 或者我应该使用其他东西
  • vim:同步多个主机上所有插件的最佳实践是什么

    我正在尝试开始使用 vim 插件管理工具来管理我的 vim 插件 例如 vundle 并且我有多个主机并希望它们与 vim 设置同步 目前我正在将 vim 目录检查到 git 存储库中 但我不想签入所有插件 因为它们属于其他插件 想知道如果
  • asp.net 将字符串变量传递给用户控件

    我正在尝试将代码隐藏变量的值传递给用户控件 例如
  • Python 中的整数是按值传递还是按引用传递?

    我编写了以下代码来检查整数是否按值或引用传递 foo 1 def f bar print id foo id bar bar 1 print foo bar f foo 我得到的输出是 True 1 2 从Python文档来看 id obj
  • 我如何主题滚动 jGrowl

    我正在构建一个网站 并且尝试使用 jquery ui 主题来实现尽可能多的样式 jGrowl 网站称它可以进行主题滚动 从网站 1 2 2 的变化 通知现在可以为 jQuery UI 进行主题滚动 特别感谢 Jeff Chan 确实没有任何
  • 使用远程 gdbserver 启动 ddd

    我正在使用 ddd 调试在远程目标上运行的程序 例如 远程 gdbserver 通过端口 1234 在本地主机上运行 但仍充当远程 我知道你可以通过打开 ddd 连接到 gdbserver 然后调用target remote localho
  • 使用未解析的标识符“GGLContext”

    我正在将 Google Sign In 集成到我的 ios Swift 应用程序中 我按照谷歌开发者页面上的官方说明进行操作 https developers google com identity sign in ios sign in
  • 创建状态项 - 图标显示,菜单不显示

    在基于文档的项目中 我试图创建一个状态菜单 我有一个构建状态栏的单例类 并且我从应用程序委托启动它 如您所见 当我运行它时 我没有收到任何错误 但只有状态栏的图像 但没有下拉菜单 我在 IB 中创建了菜单 我搞砸了什么 Delegate i
  • 使用 Swift 计算 SpriteKit 中的 delta

    我正在尝试通过重构我的一款旧游戏来快速学习 我需要重写我的update计算增量时间的方法 这段代码works但很丑 我该怎么办properly重写这个 import SpriteKit class GameScene SKScene var
  • Flot:如何在条形图中设置数字样式?

    我在用着流程图 http www flotcharts org 它是插件Flot barnumbers Demo http joetsoi github io flot barnumbers 显示图表 我需要在栏中显示数字 它可以工作 不幸