javascript - 带有 jQuery 的饼图

Question

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

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

score 99 · Accepted Answer

弗洛特

限制：线、点、填充区域、条形图、饼图以及它们的组合

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

主干版本的 Flot 支持饼图。

浮动缩放功能。

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

迷你图

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

Sparklines 是我最喜欢的迷你绘图工具。非常适合仪表板样式图表（下次登录时想想 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

限制：条形图、线形图

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

簇状图

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

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

score 48 · Accepted Answer

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

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

score 5 · Accepted Answer

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