为图表使用动态数据

Question

我希望建立一个包含大量用户生成数据的站点.我正处于自学编程的第一年: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样式图形程序,这对我来说似乎没有有相同的支持水平？

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

Answer 1

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

以下是基于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(也许是最广泛使用的)

• jqplo t(大量选择的绘图类型,高度模块化,例如,超出基础的大多数功能,一次添加一个插件)
  
  

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

• d3(protovis的继承者;令人惊叹的图形质量,丰富的交互元素,动画;不是严格基于jQuery的,但作者显然借用了jQuery的基本语法模式;由完美的数据可视化专家,Jan Willem Tulp不同于d3的优秀教程这里提到的其他人,这是一个低级库;确实有(至少)几个基于d3的绘图库,例如,shutterstock的人力车,以及Square的立方体.如果你想要传统的xy线/条图,那么例如,你可以更快地在HighCharts中建立你的情节.随着用例变得更具体,D3变得更有趣 - 特别是动画和非正统的可视化(旭日图,和弦图,平行线图,地理地图等)

• RafaelJS,在SVG中呈现,与d3和processing.js一起,你可以用这个库制作任何东西(例如,浏览器中的双人游戏); gRafael是一个单独的库,用于创建通常的绘图类型(条形,直线,饼图)
  
  

III.时间序列图

• dygraphs(一个javascript库将soley deley去了时间序列绘图,其功能集反映了这个任务,例如,处理和渲染具有大量数据(> 10,000点)的绘图的能力,时间轴刻度标签的广泛选项有许多格式选项

• HighStock(来自HighChart人的时间序列库)
  
  

IV.实时/流数据

• Smoothie Charts(稀疏功能集,仅用于做一件事,它可以顺利渲染流数据; HighCharts,jqplot和flot也会这样做,但取决于你的数据的特性(方差,速率)这三个通用图书馆可能不会将数据显示为"尖尖",这正是Smoothie旨在消除的数据)