使用jQuery饼图(Pie chart with jQuery)

2019-06-17 23:36发布

我想在JavaScript中创建一个饼图。 在搜索,我发现了谷歌图表API。 由于我们使用jQuery我发现有jQuery的集成谷歌图表可用。

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

Answer 1:

jqPlot看起来相当不错,它是开源的。

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



Answer 2:

美丽

限制:点,线,填充区域,酒吧,馅饼和这些的组合

从交互的角度看,海军报远远将让你尽可能接近到Flash图形,你可以用得到jQuery 。 虽然图形输出是非常漂亮,而且非常好看,你也可以用数据点进行交互。 我的意思是,你可以有一个数据点悬停,并在图表中该点的值获得视觉反馈的能力。

海军报的主干版本支持饼图。

海军报变焦能力。

除此之外,你还可以选择图的块来找回数据为特定的“区”的能力。 作为辅助功能,这种“分区”,你也可以选择在图上的区域,放大到更贴切一点看到的数据点。 非常酷


迷你

局限性:饼图,折线图,条形图,组合

迷你图是我最喜欢的小图形工具在那里。 真正伟大的仪表盘样式图(认为谷歌分析仪表板下一次你登录)。 因为他们是如此微小,它们可以被包含在线路(如在上面的例子)。 它可以在所有的绘图插件来使用的另一种不错的想法是自刷新功能。 他们的鼠标速度演示展示了你的实况制图力量处于最佳状态。


查询图表0.21

局限性:面积,线,酒吧以及它们的组合

jQuery的图表0.21是不是最好看的图表插件在那里它可说。 这是非常基本的在功能上,当涉及到它可以处理的图表,但它可以灵活,如果你可以把一些时间和精力投入到它。

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

.chartAdd({

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

jQchart

局限性:条形图,折线图

jQchart是一个奇怪的一个,他们已经建立的动画transistions和拖/放功能到图表,但它是一个有点麻烦 - 而且似乎毫无意义。 它生成好看的图表,如果你得到的CSS设置正确,但有更好的在那里。


TufteGraph

局限性:酒吧和堆积条形图

Tuftegraph销售本身“相当棒图,你会显示你的母亲”。 它接近,海军报是漂亮,但塔夫特确实有助于自己是非常轻巧。 虽然有自带的限制 - 有几个选项可供选择,让你得到你给什么。 检查出来的速赢条形图。



Answer 3:

在这里很好的建议吨,只是要抛ZingChart到堆栈中的良好措施。 我们最近发布了一个jQuery的包装的,使得它更容易构建和自定义图表库。 该CDN链接在下面的演示。

我在ZingChart团队,我们在这里回答你们任何人有任何问题!

 $('#pie-chart').zingchart({ "data": { "type": "pie", "legend": {}, "series": [{ "values": [5] }, { "values": [10] }, { "values": [15] }] } }); 
 <script src="http://cdn.zingchart.com/zingchart.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script> <div id="pie-chart"></div> 



Answer 4:

尚未提到的几个人:

对于小馅饼,线,棒, Peity是辉煌的,简单,小,速度快,使用真正的优雅标记。

我不知道它与海军报(给它的名字)的关系,但Flotr2是相当不错的,当然不会好馅饼比海军报。

崖产生好看的线图,但我有一点与它的馅饼麻烦。

不是我所后,但其他商业产品(很像Highcharts)是的TeeChart 。



Answer 5:

有一个在该领域的新玩家,提供的是使用Canvas的超流畅的动画和性能先进的导航图:

https://zoomcharts.com/

图表示例:

文档: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

什么是酷这个lib目录下:

  • 其他片可扩展
  • 馅饼提供深入的层次结构(参见例子)
  • 轻松编写您自己的数据源控制器,或提供简单的JSON文件
  • 出口高分辨率图像开盒即用
  • 触控的支持,工程进展顺利的iPad,iPhone,Android等

图表是免费的非商业用途,商业许可证和可用的技术支持。

此外交互式时间图表和网络图表在那里为你使用。

图表配备了丰富的API和设置,这样你就可以控制图表的每一个方面。



Answer 6:

chart.js之是非常有用的,支持许多其他类型的图表为好。

它既可以使用jQuery和不被使用。



Answer 7:

检查的TeeChart为Javascript

  • 免费用于非商业用途。

  • 包括jQuery的 ,Node.js的,WordPress的,Drupal的是,Joomla,微软打字稿等插件...

  • 交互式演示在这里和这里 。

  • 一些演示的一些截图:



文章来源: Pie chart with jQuery