隐藏

{% 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="{% static 'app/HighChart/js/modules/exporting.js' %}"></script>
    <script type="text/javascript" src="{% static 'app/HighChart/js/highcharts.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',

                },
                xAxis: {},

                plotOptions: {
                    series: {
                        showCheckbox: true
                    },
                    line: {
                        events: {
                            checkboxClick: function (event) {
                                if (event.checked == true) {
                                    this.show();
                                }
                                else {
                                    this.hide();
                                }
                            },
                            legendItemClick: function (event) {//return false 即可禁用LegendIteml，防止通过点击item显示隐藏系列
                                return false;
                            }
                        }
                    }
                },
                credits: {
                    enabled: false,
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                    visible: true,//默认不显示
                    selected: true,
                }]
            });
            //刷新图像
            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 %}