jQuery 饼图

IT技术 javascript jquery jquery-plugins google-visualization
2021-02-21 16:15:28

我想用 JavaScript 创建一个饼图。在搜索时,我找到了 Google Charts API。由于我们使用的是 jQuery,我发现有适用于 Google Charts 的 jQuery 集成

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

6个回答

浮标

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

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

flot 的主干版本支持饼图。

浮点缩放功能。

最重要的是,您还可以选择图形的一个块来获取特定“区域”的数据。作为此“分区”的次要功能,您还可以选择图形上的一个区域并放大以更仔细地查看数据点。很酷


迷你图

限制:饼、线、条、组合

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


查询图表 0.21

限制:Area、Line、Bar 以及这些的组合

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

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

.chartAdd({

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

图表

限制:条形、线形

jQchart 是一个奇怪的图表,他们在图表中内置了动画转换和拖/放功能,但是它有点笨拙——而且似乎毫无意义。如果CSS设置正确,它确实会生成漂亮的图表,但还有更好的图表


塔夫特图

限制:条形和堆叠条形

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

每当我看到这样一个不错的列表时,我发现自己希望每个项目都是一个单独的答案,以便可以独立投票。简单地使用得分最高的库会更有效率。
2021-04-27 16:15:28
作为一个使用过 Flot 并发现它是一个很好的可靠库的人,在这里加入。
2021-04-27 16:15:28
感谢您的回答。我正在检查 jqPlot 现在它似乎解决了我的问题。但是仍然存在 1 个问题,我需要图表图例出现在图表中而不是外部。
2021-05-08 16:15:28
grr 我尝试了 flot 但放弃了它,因为我无法自定义轴标签
2021-05-14 16:15:28
Sorantis,查询图表 0.21 的链接已失效。
2021-05-14 16:15:28

jqPlot看起来不错,而且是开源的。

这是最令人印象深刻和最新的jqPlot 示例的链接

注意:在大多数版本中(目前也是最近的)它在 (function($)..) 声明之外使用 $ 引用,因此它可能与原型或其他任何内容冲突
2021-05-11 16:15:28

这里有很多很棒的建议,只是打算将ZingChart放到堆栈中以进行良好的衡量。我们最近为该库发布了一个jQuery 包装器,它使构建和自定义图表变得更加容易。CDN 链接在下面的演示中。

我是 ZingChart 团队的一员,我们在这里回答你们任何人的任何问题!

对我不起作用:(
2021-05-01 16:15:28

其他一些没有提到的:

对于迷你馅饼、线条和条形图,Peity非常出色、简单、小巧、快速,使用非常优雅的标记。

我不确定它与 Flot 的关系(鉴于它的名字),但Flotr2非常好,当然比 Flot 做的馅饼更好。

Bluff生成了漂亮的折线图,但我在处理它的馅饼时遇到了一些麻烦。

不是我想要的,但另一个商业产品(很像 Highcharts)是TeeChart

Chart.js非常有用,还支持许多其他类型的图表。

它可以与 jQuery 一起使用,也可以不使用。

优秀的饼图库。我将 charts.js 用于饼图,将 morris.js 用于其他所有内容。morris.js 很棒,除了那些愚蠢的 f!&*# 圆环图。当我想要一个没有 af!^&*@ 甜甜圈洞的实际饼图时,我只看 charts.js。Charts.js 可能也是其他类型图表的一个很好的解决方案,但你无法击败 morris.js 故意非常容易使用的 API
2021-04-28 16:15:28