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文件中调用绘图构造函数，并传入（i）数据源; （ii）美学选项（例如，轴标签），以及（iii）容纳标记的容器标记中的位置;通常期望此位置采用id选择器的形式。所以在jqplot例如jQuery ready事件中，

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

我推荐的基于javascript的数据可视化库（基于已经将多个项目用于多个项目）。

的予。传统的绘图格式：条形，直线，点，饼

在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上，例如，rickshaw由shutterstock和cube由Square。如果您想要传统的xy线/条图，那么您可以更快地在HighCharts中构建您的图.D3变得更多有趣的是，用例变得更加具体 - 特别是动画和非正统可视化（旭日图，和弦图，平行线图，地理地图等）
RafaelJS ，在SVG中渲染，再加上d3和processing.js，您可以做任何事情（例如，双人游戏）使用此库的浏览器中的游戏; gRafael 是一个单独的库，用于创建通常的绘图类型（bar，line，pie）

的 III。时间序列图

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

的 IV。实时/流媒体数据

Smoothie Charts （稀疏功能集，仅用于做好一件能够顺利渲染流媒体数据的功能; HighCharts，jqplot和flot也可以这，但这取决于您的数据的特征（方差，速率），这三个通用库可能不会将数据显示为“尖锐”，这正是Smoothie旨在消除的数据）

Answer 2

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

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

Answer 3

我找到了另一个javascript图表库，可用于流数据= https://github.com/INRIA/VisualSedimentation。该代码基于d3.js，但具有一定的可扩展性。

为图表使用动态数据

3 个答案: