与jQuery的饼图

我想在JavaScript中创build一个饼图。 在search时,我find了Google Charts API。 由于我们使用jQuery,我发现有可用的Google图表的jQuery集成 。

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

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

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

海军报

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

从交互的angular度来看,Flot到目前为止将尽可能地接近你的Flashgraphics,你可以用jQuery获得。 虽然graphics输出非常漂亮,而且看起来很棒,但您也可以与数据点进行交互。 我的意思是说,你可以将鼠标hover在数据点上,并获得图表中该点值的视觉反馈。

flot的主干版本支持饼图。

浮动缩放function。

最重要的是,您还可以select一个图块来获取特定“区域”的数据。 作为此“分区”的第二个function,您还可以selectgraphics上的某个区域并放大以更仔细地查看数据点。 非常酷


迷你

限制:馅饼,线,酒吧,组合

迷你图是我最喜欢的迷你graphics工具。 非常适合仪表板样式的graphics(下次login时请考虑Google Analytics(分析)信息中心)。 因为它们非常小,所以可以将它们包括在内(如上例所示)。 另一个可用于所有graphics插件的好主意是自刷新function。 他们的鼠标速度演示显示了最好的实时制图function。


查询图表0.21

局限性:区域,线条,条形和这些的组合

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

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

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

jQchart

限制:酒吧,线

jQchart是一个奇怪的,他们已经build立了animation转换和拖放function到图表中,但是它有点笨重 – 而且看起来毫无意义。 它确实生成好看的图表,如果你的CSS设置正确,但有更好的。


TufteGraph

限制:酒吧和堆叠酒吧

Tuftegraph把自己卖成“漂亮的条形图,你会告诉你的母亲”。 它接近,Flot更漂亮,但是Tufte本身就很轻巧。 虽然有限制 – 有几个选项可供select,所以你得到你给。 检查一下快速赢条形图。

这个领域有一个新的玩家,提供先进的交互式HTMl5图表:

http://datavisualizationsoftwarelab.com/en/products/pie-chart/

图表示例:

交互式饼图

文档: http : //developers.dvsl.co/en/pie-chart/

什么是这个lib的酷:

  • 其他切片可以扩大
  • Pie为分层结构提供向下钻取(参见示例)
  • 轻松编写自己的数据源控制器,或者提供简单的json文件
  • 导出高分辨率的图像
  • 触摸支持,在iPad,iPhone,Android等平台上顺畅运行

在这里输入图像说明

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

另外交互式时间图和净图表供您使用。 在这里输入图像说明

在这里输入图像说明

图表带有大量的API和设置,因此您可以控制图表的每个方面。

这里有很多好的build议,只要把ZingChart扔到堆栈上就可以了。 我们最近为这个库发布了一个jQuery包装器 ,这使得构build和定制图表变得更加容易。 CDN链接在下面的演示中。

我在ZingChart团队,我们来这里回答您可能有的任何问题!

 $('#pie-chart').zingchart({ "data": { "type": "pie", "legend": {}, "series": [{ "values": [5] }, { "values": [10] }, { "values": [15] }] } }); 
 <script src="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> 

还有一些没有提到的其他人:

对于迷你馅饼,线条和酒吧, Peity是辉煌,简单,微小,快速,使用真正优雅的标记。

我不确定它是否与Flot有关系,但是Flotr2相当不错,当然比Flot更好。

虚张声势产生漂亮的线条图,但是我的馅饼有点麻烦。

不是我所追求的,而是另一个商业产品(就像Highcharts)是TeeChart 。

Chart.js非常有用,也支持许多其他types的图表。

它可以用于jQuery和没有。

检查TeeChart的Javascript

  • 免费用于非商业用途。

  • 包括jQuery ,Node.js,WordPress,Drupal,Joomla,Microsoft TypeScript等插件…

  • 在这里和这里进行互动演示。

  • 一些演示的一些截图:

TeeChart Javascript  - 酒吧

TeeChart Javascript  -  Pie

TeeChart的Javascript  - 点