为图表使用动态数据

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旨在消除的数据）

Answer 2

如果您要处理非常大的数据集（> 10000个元素），无论您最终选择哪个Javascript库，都可能会遇到性能问题。

话虽如此，有越来越多的Javascript工具包使用HTTP请求动态加载数据集作为JSON，XML等... flot是非常快速和开源的。 Highcharts功能丰富，非商业项目免费。 如果你需要更多深奥的可视化，你必须看看d3.js。

Answer 3

我发现另一个javascript图表库对流数据有用= https://github.com/INRIA/VisualSedimentation 。 该代码基于d3.js，但具有一些良好的可扩展性。