饼图与jQuery

时间:2009-08-03 17:25:09

标签: javascript jquery jquery-plugins google-visualization

我想在JavaScript中创建一个饼图。在搜索时,我找到了Google Charts API。由于我们使用的是jQuery,因此我发现有jQuery integration for Google Charts可用。

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

7 个答案:

答案 0 :(得分:97)

Flot

限制:线条,点,填充区域,条形图,饼图和这些

的组合

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

flot的trunk版本支持饼图。

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

限制:Bar,Line

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


TufteGraph

限制:条形和堆积条

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

答案 1 :(得分:47)

jqPlot看起来很不错,而且是开源的。

以下链接指向最令人印象深刻且最新的jqPlot examples

答案 2 :(得分:5)

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

答案 3 :(得分:4)

其他一些未被提及的人:

对于迷你馅饼,线条和酒吧,Peity非常棒,简单,小巧,快速,使用非常优雅的标记。

我不确定它与Flot的关系(给出它的名字),但是Flotr2非常好,肯定比Flot更好的馅饼。

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

不是我追求的,但另一种商业产品(很像Highcharts)是TeeChart

答案 4 :(得分:4)

该领域有一个新玩家,提供高级导航图表,使用Canvas进行超流畅的动画和表现:

https://zoomcharts.com/

图表示例:

interactive pie chart

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

这个lib有什么好处:

  • 其他切片可以扩展
  • Pie为层次结构提供深入分析(参见示例)
  • 轻松编写自己的数据源控制器,或提供简单的json文件
  • 将高分辨率图像导出开箱即用
  • 完全触摸支持,可在iPad,iPhone,Android等上顺利运行。

enter image description here

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

还可以使用交互式时间图表和网络图表。 enter image description here

enter image description here

图表附带了广泛的API和设置,因此您可以控制图表的各个方面。

答案 5 :(得分:3)

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

它既可以用于jQuery,也可以用于。

答案 6 :(得分:-1)

检查TeeChart for Javascript

  • 免费用于非商业用途。

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

  • 互动演示herehere

  • 部分演示的一些截图:

TeeChart Javascript - Bars

TeeChart Javascript - Pie

TeeChart Javascript - Points