饼图与jQuery Flot Sparklines查询图表0.21 jQchart TufteGraph TeeChart for Javascript

Posted 2021-04-24

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了饼图与jQuery Flot Sparklines查询图表0.21 jQchart TufteGraph TeeChart for Javascript相关的知识，希望对你有一定的参考价值。

我想用javascript创建一个饼图。在搜索时，我找到了Google Charts API。由于我们使用jQuery，我发现有jQuery integration for Google Charts可用。

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

答案

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

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

另一答案

Flot

限制：线条，点，填充区域，条形图，饼图和这些组合

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

主干版本的flot支持饼图。

Flot Zoom功能。

除此之外，您还可以选择图形块以获取特定“区域”的数据。作为此“分区”的辅助功能，您还可以选择图形上的区域并放大以更密切地查看数据点。很酷。

Sparklines

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

Sparklines是我最喜欢的迷你图形工具。非常适用于仪表板样式图表（下次登录时可以考虑使用Google Analytics信息中心）。因为它们非常小，所以它们可以排成一行（如上例所示）。可以在所有图形插件中使用的另一个好主意是自刷新功能。他们的鼠标速度演示向您展示了最佳实时图表的强大功能。

Query Chart 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

限制：酒吧和堆积酒吧

Tuftegraph将自己称为“漂亮的条形图，你会向你的母亲展示”。它接近，Flot更漂亮，但Tufte确实非常轻巧。尽管有这样的限制 - 几乎没有可供选择的选项，所以你得到的是你得到的。检查一下快速赢取条形图。

另一答案

这里有很多很好的建议，只是将ZingChart扔到筹码堆上。我们最近为该库发布了一个jQuery wrapper，使得构建和自定义图表变得更加容易。 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>

另一答案

还有一些没有提到的：

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

我不确定它与Flot的关系（给出它的名字），但Flotr2相当不错，肯定比Flot更好的馅饼。

Bluff生成漂亮的线图，但我的馅饼有点麻烦。

不是我追求的，但另一个商业产品（很像Highcharts）是TeeChart。

另一答案

该领域有一个新的玩家，提供高级导航图表，使用Canvas进行超平滑的动画和性能：

https://zoomcharts.com/

图表示例：