django highcharts通过ajax实现局部图表刷新

在网页中插入highcharts图表，图表数据来自后台mysql数据库。通过该网页提交的参数使highcharts图表更新。对此，图表刷新需通过ajax，局部刷新，并保持网页的设置参数不改变。全网页刷新会导致网页恢复到初始的静态网页，对网页变化的参数设置将全部丢失。

1 highcharts图表初始化

当网页加载初始化时，将触发highcharts初始化代码。django框架下，由url触发的views函数会提交图表输入数据。

$(document).ready(function() {  // jQuery网页加载初始化，实现highcharts的初始化。
	var title = { text:"new cases world" };
	var subtitle = { text: 'Source: https://www.worldometers.info/coronavirus' };
	var xAxis = { categories:{{Listx|safe}} };
	var yAxis = {  title: { text: 'New Cases' },
	plotLines: [{value: 0, width: 1, color: '#808080'}]  };   
	var tooltip = {valueSuffix: ''};
	var legend = {layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0, };
	var series =  [{name:'新增', data: {{Listy|safe}} }  ];
	var chart ={ type: 'spline' };   //平滑曲线：spline，
	var json = {};
	json.title = title;
	json.subtitle = subtitle;
	json.xAxis = xAxis;
	json.yAxis = yAxis;
	json.tooltip = tooltip;
	json.legend = legend;
	json.series = series;
	json.chart =chart;
	$('#container').highcharts(json);   //写入highcharts所在的标签，highcharts.js的导入必须放在同一个block。
  }); 

2 引发highcharts图表更新事件，传递到后端

图表更新由bootstrap提供的按钮下拉菜单触发。

$('#usa').on('click',  function() {
	$('#country').text('usa button');           // 写入 text
	$('#country').val('usa');               // 写入 value
	var a1 = document.getElementById('country1').value;
    var a2 = document.getElementById('disp1').value;
    myAjax(a1,a2);
});

网页中设置了两个按钮下拉菜单，分别提供曲线显示字段名和国家名称。当某个按钮下拉菜单事件触发时，将事件名称写入text（在按钮上显示事件）;同时写入value（保存提取的事件）。ajax接口将两个按钮的当前value发送到后端程序，用于后端数据库提取。

3 ajax接口，更新highcharts

• 通过ajax发送两个参数：国别country和显示字段名disp。返回函数success:function(data)，data是后端程序返回的数据。
• 组织好highcharts数据组json。
• 将json写入网页标签 id=container

function myAjax(a,b){                  //Ajax函数
	$.ajax({
		url:"check", 
		type:"POST", 
        dataType: "json",  //json
		data:{
        	country: a,  //国别参数
            disp: b,     //显示字段名参数
            "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val() ,//csft token
        },
		success:function(data){  // data形参就是异步提交的返回数据
			var x=data.Listx;
            x = eval("("+x+")");    //去掉json导致的方括号外面的双引号
            var y=data.Listy;
            y = eval("("+y+")");
            var title = { text:data.name };     //返回值1：曲线名称         
            var subtitle = { text: 'Source: https://www.worldometers.info/coronavirus' };
            var xAxis = { categories: x };       //返回值2：x坐标，时间值        
            var yAxis = {  title: { text: 'New Cases' },
            plotLines: [{value: 0, width: 1, color: '#808080'}]  };   
            var tooltip = {valueSuffix: ''};
            var legend = {layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0, };
            var series =  [{name:'新增', data:y}];            //返回值3：y坐标，浮点数值              
            var chart ={ type: 'spline' };   //平滑曲线：spline，折线：line。
            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;
            json.chart =chart;
            $('#container').highcharts(json);    //写入id=container的标签，即highcharts图
		},  // success:function  
	});   //.ajax
}    //myAjax

注

本网页继承base.html，jQuery，bootstrap需放到网页body的前面的block中（{% block scriptA %}{% endblock%}）,highcharts.js和javascript代码放在最后一个block中（{% block scriptB %}{% endblock%}）。前面的block scriptA保证网页分栏，按钮下拉菜单实现，后面的block scriptB需将highcharts.js放在此处，否则不显示图表。