饼图与jQuery

Question

我想用JavaScript创建一个饼图.在搜索时,我找到了Google Charts API.由于我们使用的是jQuery,因此我发现可以使用jQuery 集成Google Charts.

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

Answer 1

海军报

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

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

主干版本的flot支持饼图.

Flot Zoom功能.

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

迷你

限制:饼图,线条,条形图,组合

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

查询图表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确实非常轻巧.尽管有这样的限制 - 几乎没有可供选择的选项,所以你可以得到你所拥有的.检查一下快速赢取条形图.

Answer 2

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

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

Answer 3

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