我想用JavaScript创建一个饼图。在搜索时,我找到了Google Charts API。由于我们使用jQuery,我发现有jQuery integration for Google Charts可用。
但我的问题是在这里将实际数据发送到Google服务器以创建图表。有没有办法阻止数据发送到Google?我担心将数据发送给第三方。
jqPlot看起来很不错,它是开源的。
这里是最令人印象深刻和最新的jqPlot examples的链接。
从交互的角度来看,Flot到目前为止将使您尽可能接近Flash图形,就像jQuery
一样。虽然图形输出非常漂亮,外观漂亮,但您也可以与数据点进行交互。我的意思是,您可以将鼠标悬停在数据点上,并获得有关图中该点值的视觉反馈。
主干版本的flot支持饼图。
Flot Zoom功能。
除此之外,您还可以选择图形块以获取特定“区域”的数据。作为此“分区”的辅助功能,您还可以选择图形上的区域并放大以更密切地查看数据点。很酷。
Sparklines是我最喜欢的迷你图形工具。非常适用于仪表板样式图表(下次登录时可以考虑使用Google Analytics信息中心)。因为它们非常小,所以它们可以排成一行(如上例所示)。可以在所有图形插件中使用的另一个好主意是自刷新功能。他们的鼠标速度演示向您展示了最佳实时图表的强大功能。
jQuery Chart 0.21不是最好看的图表插件,不得不说。当涉及到它可以处理的图表时,它在功能上是非常基本的,但是如果你可以投入一些时间和精力,它可以是灵活的。
将值添加到图表中相对简单:
.chartAdd({
"label" : "Leads",
"type" : "Line",
"color" : "#008800",
"values" : ["100","124","222","44","123","23","99"]
});
jQchart是一个奇怪的,他们已经在图表中内置了动画转换和拖放功能,但它有点笨重 - 而且看似毫无意义。如果你正确设置CSS
,它确实可以生成漂亮的图表,但是那里有更好的。
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>
该领域有一个新的玩家,提供高级导航图表,使用Canvas进行超平滑的动画和性能:
图表示例:
文档:https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/
这个lib有什么好看的:
图表可免费用于非商业用途,商业许可证和技术支持。
图表附带了广泛的API和设置,因此您可以控制图表的各个方面。
Chart.js非常有用,也支持许多其他类型的图表。
它可以与jQuery一起使用,也可以不使用。