javascript – 为图表使用动态数据

前端之家收集整理的这篇文章主要介绍了javascript – 为图表使用动态数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我希望建立一个包含大量用户生成数据的站点.
我是自学编程的第一年: Python,Django,MysqL,HTML和 Javascript.

我可以很好地在桌子上绘制虚拟数据,但我现在正在考虑将这些数据转换成漂亮的彩色图形.

我正在调查第一天如何做到这一点.但在我继续之前,我想问几个问题.

似乎有很多用于构建图表的JavaScript框架,例如Google图表和jquery图表,以及一些用于构建图表的面向对象的程序,例如Cairo Plot和matplotlib.

Javascript框架似乎最初是一个很好的简单方法.但是,对于表格,您可以在HTML页面的正文中输入可变数据标记,并使Javascript使其看起来漂亮,图表的数据会进入脚本区域,其中可变数据标记看起来不太像以同样的方式工作.我正在使用Django,所以变量标签看起来像:

{{ uniquenum }}

Q1.这应该工作,我只是做错了,或者我认为变量标签不能进入脚本区域?

Q2.你有没有Javascript框架从< script>之外的数据生成图表?区域?

Q3.我已经读过Javascript框架变得越来越强大,但是因为我可能会使用大量的动态数据,我应该专注于使用像Cairo Plot和matplotlib这样的OO样式图形程序,这对我来说似乎没有有相同的支持水平?

只是想朝着正确的方向努力.

解决方法

如何将图表(通常)放在网页上?

以下是基于javascript的数据可视化库的常用API架构:

一世.在您的标记(或模板)中预先分配div作为图表容器;通常使用id选择器使用id选择器,如下所示:

<div id="chart1"> </div>

这些库通常也要求预先调整此容器的大小 – 具有高度和宽度属性,例如:

<div id="chart1" style="height:300px;width:500px; "></div>

HTML5库特别关于容器 – 即,它们要求将图表放在canvas标签内,例如,

II.从包含的javascript文件调用plot构造函数并传入(i)数据源; (ii)美学选择(例如轴标签),以及(iii)容纳标记的容器标记的位置;通常期望此位置采用id选择器的形式.所以在jqplot例如jQuery ready事件中,

plot1 = $.jqplot('chart1',[dataSet1,dataSet2],chartOptions)

我推荐的基于javascript的数据可视化库(基于已经将多个项目用于多个项目).

I.常规绘图格式:条形,线条,点,饼图

在javascript绘图库中,我推荐基于jQuery的选项,因为你需要更少的代码来创建yoru图,并且因为使用jQuery的AJAX方法来加载你的数据更容易,jqplot,flot和HighCharts(我的三个库)推荐以下)所有包含在他们的基本发行版中的完整(html,css,js)示例图,用于演示通过AJAX加载数据.

> HighCharts(开源但需要商业用途的付费许可,但是最精美和最长的功能列表; HighCharts网站上活跃且相当高的信噪比论坛)
> flot(也许是使用最广泛的)
> jqplot(大量选择的剧情类型,高度模块化,除了基础知识之外的大多数功能,一次添加一个插件)

II.图表,树木,网络图等

> d3(protovis的继承者;令人惊叹的图形质量,丰富的交互元素,动画;不是严格基于jQuery的,但作者显然借用了jQuery的基本语法模式; d3由优秀的数据可视化专家提供的优秀教程,Jan Willem Tulp不同于这里提到的其他人,这是一个低级库;确实有(至少)几个基于d3的绘图库,例如rickshaw by shutterstock,cube by Square.如果你想要传统的xy线/条图,那么,您可以更快地在HighCharts中构建您的绘图.随着用例变得更具体,D3变得更有趣 – 特别是动画和非正统可视化(旭日图,和弦图,平行线图,地理地图等)
> RafaelJS,在SVG中呈现,与d3和processing.js一起,您可以使用此库制作任何内容(例如,浏览器中的双人游戏); gRafael是一个单独的库,用于创建通常的绘图类型(条形,直线,饼图)

III.时间序列图

> dygraphs(一个javascript库为了时间序列绘图而深受其害,其功能集反映了这一使命,例如容量
处理和渲染具有大量数据的图(> 10,000
点),时间轴的刻度标签的广泛选项
许多格式选项
> HighStock(来自HighChart人的时间序列库)

IV.实时/流数据

> Smoothie Charts(稀疏功能集,只打算做好一件事,顺利渲染流媒体数据; HighCharts,jqplot和flot也会这样做,但取决于你的数据特征(方差,速率)这三个通用图书馆可能不会将数据显示为“尖锐”,这正是Smoothie旨在消除的数据)

猜你在找的JavaScript相关文章