使用 jQuery 绘制饼图

2024-04-04

我想用 JavaScript 创建一个饼图。在搜索中我发现了 Google Charts API。由于我们使用的是 jQuery,我发现有Google 图表的 jQuery 集成 http://www.maxb.net/scripts/jgcharts/include/demo可用的。

但我的问题是实际数据被发送到 Google 服务器以创建图表。有没有办法阻止数据发送到 Google?我担心将我的数据发送给第三方。


Flot http://www.flotcharts.org/

限制:线、点、填充区域、条形、饼形以及这些的组合

从交互的角度来看,Flot 将使您尽可能接近 Flash 绘图jQuery。虽然图形输出非常流畅且美观,但您还可以与数据点进行交互。我的意思是,您可以将鼠标悬停在数据点上并获得有关图表中该点的值的视觉反馈。

flot 的 trunk 版本支持饼图。

浮动缩放功能。

除此之外,您还可以选择图表的一部分来获取特定“区域”的数据。作为此“分区”的辅助功能,您还可以选择图表上的区域并放大以更仔细地查看数据点。很酷.


迷你图 http://omnipotent.net/jquery.sparkline/

限制:饼图、折线图、条形图、组合

Sparklines 是我最喜欢的迷你绘图工具。非常适合仪表板样式图表(下次登录时想想 Google Analytics 仪表板)。因为它们很小,所以可以排成一行(如上例所示)。另一个可用于所有图形插件的好主意是自刷新功能。他们的鼠标速度演示向您展示了实时图表的最佳功能。


查询图表0.21 http://www.reach1to1.com/sandbox/jquery/jqchart/

限制:面积、线、条形以及这些的组合

不得不说,jQuery Chart 0.21 并不是最好看的图表插件。当涉及到它可以处理的图表时,它的功能非常基本,但是如果您能投入一些时间和精力,它可以很灵活。

将值添加到图表中相对简单:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart http://jsgt.org/lib/jquery/plugin/jqchart/sample/v003/test-use-gradient.html

限制:条形图、折线图

jQchart 是一个奇怪的东西,他们在图表中内置了动画转换和拖放功能,但它有点笨重 - 而且看起来毫无意义。如果你得到了它确实会生成漂亮的图表CSS设置正确,但还有更好的。


塔夫特图 http://xaviershay.github.com/tufte-graph/

限制:条形图和堆叠条形图

Tuftegraph 将自己推销为“你可以给你妈妈看的漂亮条形图”。很接近,Flot 更漂亮,但 Tufte 确实非常轻。尽管随之而来的是限制——可供选择的选项很少,所以你得到了你所得到的。查看快速获胜条形图。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 jQuery 绘制饼图 的相关文章

  • 为什么 Google Developer Library 的 jQuery 链接中没有协议?

    我总是很怀疑 我认为谷歌很聪明 但是当我复制那里的开发者网站的 jquery 链接时https developers google com speed libraries devguide https developers google c
  • jQuery的$如何既是函数又是对象?

    我的意思是对象 object Object 它是怎么做的 selector and fn init同时 你能给我一个简单的例子吗 这并不是 jQuery 独有的 而是 javascript 的一个方面 所有函数都是对象 例如 var f f
  • 在 TypeScript 中迭代对象的键和值

    在纯 JavaScript 中 我们可以迭代对象属性和值 如下所示 const values Object keys obj map key gt obj key 在 TypeScript 中 此语法是错误的 因为 TS 编译器显示以下消息
  • 如何使用 jQuery.validator 占位符自定义错误消息?

    我正在尝试添加自定义表单验证器 我陷入了消息定制问题 假设我想检查字段值是否不超过允许的最大值 我知道 验证插件 已经有一个 最大 验证器 这只是为了示例 validator addMethod max numeric function v
  • 在 PHP 中合并文件块

    出于教育目的 我想创建文件块上传 你们怎么知道所有块何时上传 我试图从temp并重命名它们 使它们按正确的顺序排列 然后与最后一个块将它们合并在一起 然而 我猜最后发送的并不是最后收到的 所以fopen on chunks 失败 因为它们尚
  • 如何在点击时添加和删除活动类 - 角度方式

    我正在这样做 div class tiles div 控制器 scope select function item scope selected item scope isActive function item return scope
  • React Native 中循环 Json 并显示

    How do I go about looping the result i retrieved from Json render function console log this state list contents
  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te
  • 在网站的一次导航中仅显示一次弹出窗口

    我有一个使用 Laravel 创建的网站 我希望用户第一次访问我的网站时能够看到弹出窗口 我的意思是第一次 用户访问我网站上的任何页面 这是第一次 访问网站上的一些链接页面 现在 这些页面访问不是第一次 在同一选项卡中打开 facebook
  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • 如何在 blob 类型中使用 UTF-8?

    我必须通过 csv 文件导出表 csv 文件数据来自服务器 按 Blob 类型 Blob size 2067 type text csv async exportDocumentsByCsv this commonStore setLoad
  • Bootstrap 的跨浏览器数字微调器/步进器 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个与 Twitter Bootstrap 2 3 集成的数字微调器 使用 HTML5input type number
  • 接近堆限制的无效标记压缩分配失败 - JavaScript 堆内存不足

    我正在使用 Angular 7 2 当我进入ng serve 我面临以下问题 致命错误 接近堆限制的无效标记压缩分配失败 JavaScript 堆内存不足 这意味着什么 我该如何解决这个问题 完整的错误消息是 FATAL ERROR Ine
  • 如何减少 jQuery 函数中使用的子级数量?

    我觉得我必须使用太多 children 在我的一些 jQuery 函数中 这是我的 HTML div class goal small container div class goal content div class goal row
  • 当来自 Mozilla Firefox 和 MS Edge 上的剪贴板时 Alpha 会变成黑色

    我正在使用代码从这里 https stackoverflow com a 15369753 5875416将剪贴板中的图像粘贴到页面上 它在所有浏览器 Chrome Firefox Edge 和 Opera 中都能正常工作 问题是 当图像是
  • 通过 Javascript 填充 ReactJS HTML 表单

    我正在开发一个应用程序 在打开第 3 方网站后 我可以在浏览器上下文中运行我自己的 Javascript 作为一个基于reactjs构建并具有登录表单的示例网站 您可以参考此链接 我正在尝试在reactjs生成的表单中填写用户名和密码 但是
  • 何时使用node.js、sinatra、rails? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这 3 种语言 框架的最佳用途是什么 混合所有 或 2 个 有用吗 如果您正在构建一个完整的 Web 应用程序 您可能应该使用 Rails 因为
  • 只允许在输入字段中输入数字

    我想要打开电话号码字段这个网站 http myfrugaltech com dev savoo register 只接受数字或数字 我无权编辑 HTML 代码 那么可以使用 jQuery 通过定位字段 ID 来完成此操作吗 如果可以的话 该
  • 如何从 fetch API 返回 json 响应

    我有一个像这样的函数 check auth fetch Urls check auth credentials include method GET then response gt if response ok return respon
  • 解析函数是否异步传递给 Promise 执行器?

    我有以下代码 function myPromiseFunc return new Promise resolve gt resolve Promise resolve 123 据我们所知Promise resolve方法立即用普通值解析 P

随机推荐

  • 显示网络流量

    是否可以查看类似于以下内容的网络流量 http 请求 原始 http 等 chrome dev tools network tab 由应用程序生成 nodejs如果有什么区别的话 通过vscode 此功能已经存在 但它不显示正在运行的应用程
  • 在 CentOS 上安装 M2Crypto

    我正在尝试通过从源代码编译来在 CentOS 上安装 M2Crypto 我正在做一个 python setup py 构建 但我收到以下错误 usr local lib python2 6 distutils dist py 266 Use
  • 在 Swift 中将对象写入 CSV 时如何处理逗号?

    关于堆栈溢出似乎还有其他答案 但没有任何特定于 swift 的答案 我正在从包含 3 个属性的站点对象生成 CSV Struct SiteDetails var siteName String var siteType String var
  • 用于谷歌存储的静态网站的 Terraform 谷歌存储桶 - 403

    尝试为静态网站创建一个谷歌存储桶 provider google project myprojectname 123 credentials file storage admin json region us central1 zone u
  • 造成这种性能下降的原因是什么?如何调查它?

    Context 我正在使用 NEON SIMD 指令为 ARM64 编写一些高性能代码 我正在尝试进一步优化 我只使用整数运算 不使用浮点数 此代码完全受 CPU 或内存限制 它不执行任何类型的系统调用或 I O 文件系统 网络或其他任何内
  • LINQ to Entities 无法识别方法“System.Web.Mvc.FileResult”

    我试图用他们的图像显示多个用户名所以 我有一个像这样的 Json 操作方法 public JsonResult GetUsers var ret from user in db Users orderby user UserName sel
  • 每次 RxSwift 中 UITextField 文本属性更改时如何获取信号

    如何从以编程方式对 UITextField 文本属性进行的更改中获取信号 通过使用 rx text 仅当用户通过键盘输入文本时报告信号 如果您以编程方式设置 textField text 则信号不会触发 这就是我使用 rx text 的方式
  • 如何将 3D 点云导出为渲染的体素网格?

    我有一个由几个彩色体素组成的场景 当在 meshlab 中打开它时 所有点都被绘制为二维正方形 是否可以在网格实验室中渲染一个场景 其中正方形被 3D 立方体替换 并具有额外的闪电 反射率 这是我到目前为止得到的 我宁愿想要这样的东西 我为
  • 使用 protobuf 作为文本配置文件

    我最近遇到一个非常大的关键任务项目 其中所有配置 文件是使用文本 protobuf 定义来定义的 配置文件的意思是 人类可读和可编辑 例如 message ServerSettings required int32 port 3022 op
  • Coldfusion 中的字符串“00”等于“.0”?还有什么?

    所以我注意到 ColdFusion 回来了true对于条件 00 0 这可以在 CF 9 1 和 CF 10 中重现 我可以通过添加一个轻松解决这个问题find foo 条件 但这不正常 这样的事情让我对 ColdFusion 产生了怀疑
  • 使用 itextsharp 勾选 pdf 复选框

    我尝试了很多不同的方法 但我无法选中该复选框 这是我尝试过的 var reader new iTextSharp text pdf PdfReader originalFormLocation using var stamper new i
  • 在 mysql 中导出和导入 utf8 数据:最佳实践

    我们经常需要将数据文件发送给我们的一位客户 其中包含他 她需要翻译的数据库中的数据 大多数情况下 此导出为 CSV 或 XLS 大多数时候 我们使用 phpmyadmin 创建 csv 转储 并获得包含翻译数据的 xls 文件 问题是 大多
  • 在 r2017b 中使用 C++ 中的 startMATLAB 和“MatlabEngine.hpp”发出问题

    在新版本 2017b 中 Matlab 发布了新的 C MATLAB 引擎 API https fr mathworks com help matlab calling matlab engine from cpp programs htm
  • $(form).ajaxSubmit 不是函数

    我正在尝试使用 jquery 验证插件来验证表单并使用 ajax 请求提交内容 这段代码位于我的文档的头部 document ready function contact form validate submitHandler functi
  • 从命令行查找并替换多行文本

    我正在尝试使用还执行其他操作的脚本编辑配置文件 该脚本需要找到某些连续的文本行并将其删除 它需要在适当的位置粘贴一个新配置 该新配置从旧配置所在的同一行开始 在新旧配置中 空间的使用都很重要 在 configfile php 中 此文本块
  • 如何在开源(Github + Heroku)应用程序中保护 Google API 密钥

    我正在创建一个应用程序 希望在未来几周内开源 源代码位于 Github 上 如果通过了 Travis CI 测试 Heroku 会在有新提交时自动部署代码 在此应用程序中 我有几个 API 密钥 通过在我的 heroku dynos 中使用
  • 将 2 元素数组的数组转换为散列,其中重复的键附加附加值

    例如 给定一个数组 array a b a c c b 返回以下哈希 hash a gt b c c gt b hash Hash array 覆盖以前的关联 产生 hash a gt c c gt b 使用功能性婴儿步骤 irb 01 0
  • 未填充方块的 Matplotlib 散点图

    我想制作一个带有未填充方块的散点图 markerfacecolor不是一个被认可的选项scatter https matplotlib org devdocs api as gen matplotlib pyplot scatter htm
  • 如何让应用程序兼容所有Android手机?

    请帮助我解决我的问题 在我的大多数应用程序中 Ui 设计并不兼容所有 Android 设备 即 所有小部件在所有手机中都没有按正确的顺序对齐 我想开发一个应用程序应该适合所有手机尺寸和分辨率 大手机 普通手机和小手机 请解决这个问题 提前致
  • 使用 jQuery 绘制饼图

    我想用 JavaScript 创建一个饼图 在搜索中我发现了 Google Charts API 由于我们使用的是 jQuery 我发现有Google 图表的 jQuery 集成 http www maxb net scripts jgch