django 画图

{% 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 %}

 

转载于:https://www.cnblogs.com/linbinqiang/p/4891593.html