使用动态数据绘制图表
我想建立一个网站，希望里面能有很多用户生成的数据。现在我正在自学编程，学习的内容包括Python、Django、MySQL、HTML和JavaScript。
我可以把一些假数据在表格中展示得很好，但现在我想把这些数据变成漂亮的彩色图表。
我刚开始研究怎么做到这一点。在继续之前，我想问几个问题。
现在有很多JavaScript框架可以用来制作图表，比如Google Charts和jQuery Charts，还有一些面向对象的程序，比如Cairo Plot和matplotlib。
这些JavaScript框架看起来一开始是个简单的解决方案。不过，表格中的数据可以直接在HTML页面的主体部分输入变量标签，然后用JavaScript来美化，但图表的数据需要放在脚本区域，那里变量标签的用法似乎不太一样。我在用Django，所以变量标签的样子是这样的：
{{ uniquenum }}
问题1：这样应该可以工作，我是不是做错了，还是说我理解得对，变量标签不能放在脚本区域？
问题2：JavaScript框架能否从
3 个回答
我发现了另一个很有用的JavaScript图表库，适合用来处理实时数据，链接是 https://github.com/INRIA/VisualSedimentation。这个代码是基于d3.js的，但它的扩展性很好，可以方便地进行修改和添加功能。
如果你要处理非常大的数据集（超过10000个元素），那么无论你选择哪个JavaScript库，可能都会遇到性能问题。
不过，现在有越来越多的JavaScript工具包可以通过HTTP请求动态加载数据集，格式可以是JSON、XML等。比如说，flot这个库速度很快，而且是开源的。还有Highcharts，功能非常丰富，对于非商业项目是免费的。如果你需要一些更特别的可视化效果，建议你看看d3.js。
通常情况下，图表是如何放置在网页上的呢？
下面是基于JavaScript的数据可视化库的常见API结构：
i. 在你的HTML代码中预先分配一个div作为图表容器；通常使用一个id选择器来指定，比如这样：
<div id="chart1"> </div>
这些库通常还要求这个容器预先设置大小，也就是要给它设置高度和宽度，例如：
<div id="chart1" style="height:300px;width:500px; "></div>
HTML5库对容器有特别要求——也就是说，它们要求图表放在canvas标签里面，例如：
ii. 从你引入的JavaScript文件中调用图表构造函数，并传入(i) 数据源；(ii) 美观选项（例如，坐标轴标签），以及(iii) 在你的HTML中图表容器的位置；这个位置通常需要用id选择器来表示。所以在jqplot中，比如在jQuery准备就绪事件里，
plot1 = $.jqplot('chart1', [dataSet1, dataSet2], chartOptions)
我推荐的一些基于JavaScript的数据可视化库（基于我在多个项目中使用过的经验）。
I. 常规绘图格式：柱状图、折线图、散点图、饼图
在JavaScript绘图库中，我推荐基于jQuery的选项，因为你需要写更少的代码来创建图表，而且使用jQuery的AJAX方法加载数据也更简单。例如，jqplot、flot和HighCharts（下面我推荐的这三种库）都在它们的基本分发包中包含了完整的（html、css、js）示例图表，演示了如何通过AJAX加载数据。
HighCharts（开源，但商业使用需要付费许可，是功能最全、最精致的库；HighCharts网站上有活跃且噪声比率相对较高的论坛）
flot（可能是使用最广泛的库）
jqplot（提供多种图表类型，模块化程度高，例如，大部分功能都是通过一个个插件添加的）
II. 图形、树状图、网络图等
d3（是protovis的继任者；图形质量惊人，互动元素丰富，支持动画；虽然不严格基于jQuery，但作者显然借鉴了jQuery的基本语法模式；有优秀的数据可视化专家Jan Willem Tulp提供的d3教程。与这里提到的其他库不同，这是一个底层库；实际上，基于d3的绘图库有好几个，例如，rickshaw（由shutterstock提供）和cube（由Square提供）。如果你想要常规的x-y线图或柱状图，那么例如，你可以在HighCharts中更快地构建图表。D3在使用场景更具体时变得更有趣——特别是动画和非传统可视化（如日晕图、和弦图、平行线图、地理地图等）。
RafaelJS，使用SVG渲染，结合d3和processing.js，你几乎可以用这个库做任何事情（例如，在浏览器中制作双人游戏）；gRafael是一个单独的库，用于创建常规图表类型（柱状图、折线图、饼图）
III. 时间序列图
dygraphs（一个专门用于时间序列绘图的JavaScript库，其功能集反映了这一使命，例如，能够处理和渲染高数据量（>10,000点）的图表，提供多种时间轴刻度标签的选项和格式化选项）
HighStock（HighChart团队推出的时间序列库）
IV. 实时/流数据
- Smoothie Charts（功能较少，主要是为了很好地渲染流数据；HighCharts、jqplot和flot也可以做到这一点，但根据数据的特性（变化率等），这三种通用库可能不会将数据呈现得那么“尖锐”，而Smoothie正是为了消除这种情况而设计的）