93

我想用JavaScript创建一个饼图。通过搜索，我发现了Google Charts API。由于我们使用的是jQuery，因此我发现Google图表可以使用jQuery集成。

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

— 阿伦·约翰尼
source

48

jqPlot看起来不错，并且是开源的。

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

— 托马斯·布拉特
source

注意：在大多数版本中（目前也是如此），它在（function（$）..）声明之外使用$引用，因此它可能与原型或其他任何东西发生冲突

— Mario Peshev 2012年

99

绒毛

局限性：线，点，填充区域，条形图，饼图及其组合

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

flot的主干版本支持饼图。

浮点缩放功能。

最重要的是，您还可以选择图表的一部分以获取特定“区域”的数据。作为此“分区”的辅助功能，您还可以选择图形上的区域并放大以更紧密地查看数据点。很酷。

迷你图

限制：饼图，线条，条形图，组合图

迷你图是我最喜欢的迷你绘图工具。非常适合仪表板样式图（下次登录时可考虑使用Google Analytics（分析）仪表板）。由于它们非常小，因此可以将它们包含在行中（如上例所示）。可以在所有图形插件中使用的另一个好主意是自刷新功能。他们的Mouse-Speed演示向您展示了实时图表绘制的最佳功能。

查询图0.21

局限性：面积，线条，条形图及其组合

jQuery Chart 0.21并不是最漂亮的图表插件。它可以处理的图表在功能上是非常基本的，但是如果您花费一些时间和精力，它可以很灵活。

向图表添加值相对简单：

.chartAdd({

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

图表

限制：条形，线形

jQchart是一个奇怪的例子，它们内置了动画过渡功能并将拖放功能拖放到图表中，但是有点笨拙-似乎毫无意义。如果CSS设置正确，它的确会生成漂亮的图表，但是那里的效果更好。

TufteGraph

局限性：钢筋和堆叠钢筋

Tuftegraph出售自己为“您会向母亲展示的漂亮条形图”。差不多了，Flot很漂亮，但是Tufte确实很轻巧。尽管有限制，但几乎没有可供选择的选项，因此您可以得到所得到的。查看它以获取快速获胜的条形图。

— 索兰蒂斯
source

感谢您的回答。我正在检查jqPlot，看来似乎可以解决我的问题。但是仍然存在1个问题，我需要图表图例比外部出现在图表中。

— 阿伦·约翰尼

7

每当我看到这样一个不错的清单时，我都会希望每个项目都是一个单独的答案，以便可以对它们进行独立投票。简单地使用得分最高的lib会更有效率。

— 杰西·奥尔德里奇

2

在这里使用Flot并发现它是一个很好的可靠库的人。

— Brighid McDonnell '11年

我尝试了flt但放弃了它，因为我无法自定义轴标签

— chiliNUT15年

Sorantis，到查询图表0.21的链接已失效。

— 颚

5

这里有很多很棒的建议，只是将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>

展开摘要

— 摇滚袜子
source

4

其他一些未提及的内容：

对于迷你派，线条和条，Peity出色，简单，小巧，快速，使用了真正优雅的标记。

我不确定它与Flot的关系（给定名称），但是Flotr2相当不错，当然比Flot更好。

布拉夫产生漂亮的折线图，但我对它的饼形有点麻烦。

TeeChart不是我追求的，而是另一种商业产品（类似于Highcharts）。

— 同步
source

4

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

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

— 钻石蟒
source

1

优秀的饼图库。我将Charts.js用于饼图，将morris.js用于其他所有内容。morris.js非常棒，除了那些愚蠢的f！＆*＃甜甜圈图。当我想要一个没有af！^＆* @甜甜圈孔的实际饼图时，我看上去比charts.js更远。Charts.js可能也是其他类型图表的绝佳解决方案，但您无法击败morris.js的故意易于使用的API

— chiliNUT 2015年

3

该领域有一个新的播放器，它提供了高级导航图，这些图使用Canvas来实现超平滑的动画和性能：

https://zoomcharts.com/

图表示例：