Django+ajax实现动态数据可视化

现在需要实现的是数据可视化的功能，把数据化成折线图之类的显示。查了一些，决定用现成的模板HIGHCHARTS，是基于js的，比较方便使用，其实就是直接复制然后改一改自己需要的就好了。HIGHCHARTS文档在这里，可以查看一些属性之类的信息
点击这里可以找到HIGHCHARTS的好多模板，这里我使用的就是这个链接里的，实时刷新的曲线图。
实时刷新主要是通过setInterval这个方法实现的，用法大致为setInterval(code,time)，定时执行方法或代码，时间单位为毫秒。

插入图表

这里先利用HIGHCHARTS放置一个曲线图。
先引入以下js和css文件。

<link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

html代码如下所示，只需要一个div即可，用于显示图表。

<div id="FlowContainer" style="min-width:400px;height:400px"></div>

js代码如下，最好直接放到上面的div标签下面不要放在最后，看似很长，其实不用慌，直接从官网模板中复制过来就行了，然后改个div的id之类的，至于一些标题之类的属性修改，根据开头给的文档找一找就有了。
可以看到在load里有setInterval，这个就是动态刷新用的。

Highcharts.setOptions({
   
		global: {
   
				useUTC: false
		}
});
function activeLastPointToolip(chart) {
   
		var points = chart.series[0].points;
		chart.tooltip.refresh(points[points.length -1]);
}
var chart = Highcharts.chart('FlowContainer', {
   
		chart: {
   
				type: 'spline',
				marginRight: 10,
				events: {
   
						load: function () {
   
								var series = this.series[0],
										chart = this;
								activeLastPointToolip(chart);
								setInterval(function () {
   
										var x = (new Date()).getTime(), // 当前时间
												y = Math.random();          // 随机值
										series.addPoint([x, y], true, true);
										activeLastPointToolip(chart);
								}, 1000);
						}
				}
		},
		title: {
   
				text: '动态模拟实时数据'
		},
		xAxis: {
   
				type: 'datetime',
				tickPixelInterval: 150
		},
		yAxis: {
   
				title: {
   
						text: null
				}
		},
		tooltip: {
   
				formatter: function () {
   
						return '<b>' + this.series.name + '</b><br/>' +
								Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
								Highcharts.numberFormat(this