Question

$("#searchButton").click(function () {
    getData();
});

function getData() {
    //alert('button clicked');
    var dateFrom = $('#datetimepickerFrom').val();
    var dateTo = $('#datetimepickerTo').val();

    var id = $('#ddlSite').val();
    Module.loader('show');
    $("#graphId").empty();
    //zatim za graf
    $.ajax({
        type: "POST",
        url: ROOT + "Test/GetGraph",
        data: { validFrom: dateFrom, validTo: dateTo, deviceId: id },
        cache: false,
        headers: {
            Accept: "application/json"
        },
        success: function (data) {
            var brUredjaja = data.length;
            //console.log('broj izabranih stanica je : ' + brojIzabranihStanica);
            for (i = 0; i < brUredjaja; i++) {
                {
                    var brParametara = data[i].series.length;

                    if ((brParametara > 1) || (brUredjaja > 1)) {
                        for (j = 0; j < brParametara; j++) {
                            {
                                $("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + "></div>");
                                $('#checkbox').append('<input type="checkbox" checked id="myCheckbox" /*value="' + series[j].name + '"*//>' + data[i].series[j].name);
                                InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
                            }
                        }
                    } else {
                        for (j = 0; j < brParametara; j++) {
                            {
                                $("#graphId").append("<div class='graphReport col-md-12' id = div" + i + "dev" + j + "></div>");
                                $('#checkbox').append('<input type="checkbox" checked id="myCheckbox" />' + data[i].series[j].name);
                                InitGraph(data[i].dates, data[i].series[j].data, "div" + i + "dev" + j, data[i].series[j].name, data[i].deviceName);
                            }
                        }
                    }
                }
            }
            Module.loader('hide');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            Module.loader('hide');
            if (xhr.status === 403) {
                window.location = ROOT + 'Dashboard/Main/';
            }
        }
    })
}


function InitGraph(times, seriesVal, id, name, device) {
    categories = [];
    niz = [];
    Highcharts.setOptions({
        global: {
            useUTC: true
        }
    });

    $('#' + id).highcharts({
        tyraphIdpe: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        chart: {
            zoomType: 'x'
        },
        title: {
            text: name
        },
        xAxis: {
            categories: times
        },
        yAxis: {
            //min: 0,
            //max: 40,
            tickInterval: 10,
            title: {
                text: device
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' +
                    this.x + '<br/>' +
                    Highcharts.numberFormat(this.y, 2);
            }
        },
        series: [{
            name: name,
            data: seriesVal
        }],
        plotOptions: {
            series: {
                connectNulls: true
            }
        }
    });
}

这是我的Javascript，点击搜索按钮后，highchart grpahs和组合框就会呈现到页面上。

这是我的cshtml代码：

@using EkoNET.Languages;
@model EkoNET.WebApp.Models.TestViewModels

@{
    ViewBag.Title = "Index";
}


<div class="reportsDiv col-md-12 " style="padding-top:40px;">

    <div class="col-md-1"></div>
    <div class="col-md-10 visualisationDropdowns">

        @Html.ListBoxFor(m => m.SelectedId, Model.Sites, new { id = "ddlSite", @class = "form-control" })

        @Html.ValidationMessageFor(model => model.Sites)

        <input class="form-control droneDateTimePicker" placeholder="@Resource.From" id="datetimepickerFrom" type="text">
        <input class="form-control droneDateTimePicker" placeholder="@Resource.To" id="datetimepickerTo" type="text">
        <input type="button" id="searchButton" class="specificImageButton btn btn-default" value="@Resource.search" />
    </div>
    <div class="col-md-1"></div>
</div>

<div id="checkbox">

</div>

<div class="col-md-12 row" id="graphPlaceHolder" style="padding-top:20px">
    <div class="col-md-1"></div>
    <div class="col-md-10 visualisationDiv">
        @{Html.RenderPartial("_GraphVis", Model);}
    </div>
    <div class="col-md-1"></div>
</div>
<div class="col-md-12 row">
    <div class="col-md-2"></div>
    <div id="messagediv" class="col-md-9"></div>
    <div class="col-md-1"></div>
</div>

<img id="backGroundImageId" src="" class="decorationImage">

@section scripts
{
    <script src="~/Content/js/pages/TestScript.js"></script>
}

首先检查每个复选框，然后所有图形都可见...

那么，重点是如何将复选框与高图“连接”起来，以及如果用户取消选中某些复选框，如何隐藏某些提示呢？

我猜我在JavaScript的for循环中的每次迭代中都必须赋予#checkbox的值

Answer 1

我做到了：在javascript中，我添加了

function initGraphCheckBoxes() {
    $('.graphCb').on('change', function () {
        var graphName = $(this).attr('graph-name');
        $('div[graph-name="' + graphName + '"]').toggle();
    })
}

并且for循环已更改

$("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + "></div>");
$('#checkbox').append('<input type="checkbox" checked id="myCheckbox" /*value="' + series[j].name + '"*//>' + data[i].series[j].name);

到

$("#graphId").append("<div class='graphReport col-md-6' id = div" + i + "dev" + j + " graph-name='" + data[i].series[j].name +"'></div>");
$('#checkbox').append('<input type="checkbox" checked class="graphCb" graph-name="' + data[i].series[j].name +'" />' + data[i].series[j].name);

如果未选中复选框，如何隐藏高位图？

1 个答案: