Javascript 利用动态数据绘制图形

我的目标是建立一个网站，将包含大量的用户生成的数据，希望。 我正在自学编程的第一年：Python、Django、MySQL、HTML和Javascript

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

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

似乎有许多JavaScript框架用于构建图表，如Google图表和jquery图表，还有一些面向对象的程序用于构建图表，如Cairo Plot和matplotlib

Javascript框架一开始似乎是一种很好的简单方法。然而，对于表，您可以在HTML页面的主体中输入变量数据标记，并让Javascript使其看起来漂亮，而图形的数据则放在脚本区域，其中变量数据标记的工作方式似乎不太一样。我使用的是Django，因此变量标记如下所示：

{{ uniquenum }}   

问题1。这是可行的，我只是做错了，还是我认为变量标记不能进入脚本领域是正确的

问题2。您可以让Javascript框架从

区域之外的数据生成图形吗

第三季度。我已经读到Javascript框架变得越来越强大，但由于我将潜在地使用大量动态数据，我是否应该专注于使用像Cairo Plot和matplotlib这样的OO风格的图形程序，在我看来，它们似乎没有相同的支持级别

---

只是在寻找一个正确的方向。

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

话虽如此，越来越多的Javascript工具包以JSON、XML等形式动态加载带有HTTP请求的数据集。。。是非常快速和开源的。功能非常丰富，对于非商业项目是免费的。如果你需要更深奥的可视化，你必须看一看。

绘图（通常）是如何放置在网页上的

以下是基于javascript的数据可视化库的常用API模式：

一,预先分配一个div作为标记（或模板）中的图表容器；通常使用id选择器使用id选择器，如下所示：

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

---

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

I.常规绘图格式：条形图、直线图、点图、饼图

在javascript绘图库中，我推荐基于jQuery的选项，因为创建yoru绘图所需的代码更少，而且使用jQuery的AJAX方法加载数据更容易，例如，jqplot、flot和HighCharts（我在下面推荐的三个库）都包含在它们的基本分发版complete（html、css、js）中演示如何通过AJAX加载数据的示例图

• （开源但需要付费许可证才能用于商业用途，但这是最完善、最长的功能列表；HighCharts网站上活跃且信噪比相当高的论坛）

• （可能是使用最广泛的）

• t（大量绘图类型选择，高度模块化，例如，超出基本功能的大多数功能一次添加一个插件）
  
  

II。图形、树、网络图等

• （protovis的继承者；惊人的图形质量、丰富的交互元素、动画；并非严格基于jQuery，但作者显然借鉴了jQuery的基本语法模式；由一位有造诣的数据可视化专家提供的关于d3的优秀教程，与这里提到的其他教程不同，这是一个低级库；确实有（至少）几个基于d3的绘图库，例如shutterstock和Square。例如，如果你想要传统的x-y线/条形图，你可以更快地在HighCharts中构建绘图。随着用例变得更加具体，d3变得更加有趣——特别是动画和非正统可视化（太阳爆发图、弦图、平行线图、地理地图等）

• ，在SVG中渲染，以及d3和processing.js，您可以使用此库制作任何东西（例如，浏览器中的两人游戏）；gRafael是一个单独的库，用于创建常用的绘图类型（条形图、直线图、饼图）
  
  

III.时间序列图

• （一个专门用于时间序列绘制的javascript库，其功能集反映了这一任务，例如容量 处理和渲染具有大量数据（>10000）的绘图 点），时间轴的刻度标签有多种选择 许多格式选项

• （来自HighChart的时间序列库）
  
  

IV.实时/流式数据

• （稀疏功能集，仅用于顺利渲染流数据；HighCharts、jqplot和flot也可以做到这一点，但根据数据的特征（方差、速率），这三个通用库可能不会将数据显示为“尖峰”，这正是思慕雪的设计初衷）

---

我发现另一个javascript图表库对于流式数据=（streaming data=）很有用。代码基于d3.js，但具有良好的扩展性。

关于d3的注意：它可以呈现HTML、SVG、Canvas或任何其他API（但有内置的HTML和SVG支持）。我们使用它来生成SVG，它不需要HTML5画布。@谢谢，HTML5，平滑的图表必须放在画布内tags@jjmontes：谢谢--编辑我的答案

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

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