{% extends 'base.html' %} {% block title %}环境监控{% endblock title %} {% block extracss %} {% load staticfiles %} <link rel="stylesheet" href="{% static 'app/CSS/environment.css' %}"> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script> {% endblock extracss %} {% block content %} <div class="row-fluid"> <div class="col-md-12"> <div id="my_container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </div> </div> <div class="row-fluid"> <div class="col-md-12"> <button class="btn btn-success" id="refresh-button">修改</button> </div> </div> <script type="text/javascript"> $(function () { var data_y = new Array(); data_y = [10, 20, 30, 60, 70, 10, 20, 30]; var chart; //定义图像 chart = new Highcharts.Chart({ chart: { renderTo: 'my_container', type: 'spline' }, title: { text: '智慧云平台' }, xAxis: { categories: [1, 2, 3, 4, 5, 6, 7] }, yAxis: { title: { text: '光照强度' } }, credits: { enabled: false // remove high chart logo hyper-link }, series: [{ name: '时间', data: data_y, }] }); //刷新图像 function refreshPlot(data) { chart.series[0].setData(data); chart.redraw(); }; //向后台传递数据 function ajax(data_function) { $.post('{% url 'ajax' %}', {'drugs': json_str}, data_function); } //获取后台数据json格式并返回数组格式的数据 function get_json() { data_y = [];//清空数组 //data_y=[0,10,40,0,20,60,80];//给数组重新赋值 $.getJSON('/ajax_list/', function (ret) { for (var i = ret.length - 1; i >= 0; i--) { data_y.push(ret[i]); } refreshPlot(data_y); }); } //运行函数 $(document).ready(function () { chart; //单击按钮之后的事件 $('#refresh-button').on('click', function (e) { get_json(); }); }); }); </script> {% endblock content %}