Question

我刚刚使用ASP.NET编写了一个用C＃编写的项目和一个cshtml / js前端。由于我对html和javascript一无所知，因此在尝试添加有关visjs graph2d的新功能时遇到了一些问题。

目标是有一个下拉菜单，当更改时，将图形更改为不同的数据集（它实际上只是数据解决方案的差异，但这一切都在我的C＃部分中得到了解决）。

我定位于这个visjs-example，尤其是这个函数来重新加载数据：

        function loadDataIntoVis(newData) {
            var span = document.getElementById("description");
            dataset.clear();
            dataset.add(newData);
            span.innerHTML = 'Done!';
        }

cshtml文件中的相关代码是：

            </div>
    <div class="row">
        <div class="col-lg-9">
            <legend>Stromverbrauch</legend>
            <div>
                <div id="visualization"></div>
            </div>
        </div>
    </div>


    <table>
        <col width="600">
        <col width="220">
        <tr>
            <td style="padding-right: 20px; border-right: 1px solid;">
                <div id="visualization-options"></div>
            </td>
            <td style="padding-left: 5px;">
                <table style="font-size: 12px;">
                    <col width="150">
                    <col width="50">
                    <tr>
                        <td>Intervall</td>
                        <td>
                            <select id="interval" onchange="loadData">
                                <option value="1;">1 Min</option>
                                <option value="15;" selected="selected">15 Min</option>
                            </select>
                        </td>
                    </tr>
    </table>
            </td>
        </tr>
    </table>


    ...


   <script>
    $(document).ready(function () {
        var container = document.getElementById('visualization');
        var names = ['Grundlast', 'Stromverbrauch Operations', 'Stromverbrauch Summe'];
        var groups = new vis.DataSet();
        groups.add({
            id: 0,
            content: names[0],
            //options: {drawPoints: false}
        });
        groups.add({ 
            id: 1,
            content: names[1],
            //options: {drawPoints: false}
        });
        groups.add({
            id: 2,
            content: names[2],
            //options: {drawPoints: false}
        });

        var items15 = [
            @foreach (var item in ECList15) {
             <text>
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Baseload).ToString(), group: 0 },
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Operations).ToString(), group: 1 },
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Sum).ToString(), group: 2 },</text>
        }
        ];

        var items1 = [
            @foreach (var item in ECList) {
            <text>
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Baseload).ToString(), group: 0 },
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Operations).ToString(), group: 1 },
                {x: '@item.Date.ToString("yyyy-MM-dd HH:mm:ss")', y: @Convert.ToInt32(item.Consumption_Sum).ToString(), group: 2 },</text>
        }
        ];



        var dataset = new vis.DataSet(items15);
        var options = {
            style: 'bar',
            defaultGroup: 'ungrouped',
            drawPoints: false,
            start: '@ECList.First().Date.ToString("yyyy-MM-dd HH:mm:ss")',
            end: '@ECList.Last().Date.ToString("yyyy-MM-dd HH:mm:ss")',
            legend: true,
            shaded: true,
            interpolation: false,
            showCurrentTime: false,
            dataAxis: {
                left: {
                    range:{
                        min: 0
                    }
                }
            }
        }

        var graph2d = new vis.Graph2d(container, dataset, groups, options);


    });


    function loadData() {
        var selected = document.getElementById("interval").value;
        console.log(selected);
        if (selected=='1') {
            console.log(dataset);
            dataset.clear();
            dataset.add(items15);
        } else {
            console.log(dataset);
            dataset.clear();
            dataset.add(items15);
        }
    }
</script>

我尝试了很多我从visjs示例中推导出的不同方法，但没有一种方法可行。如果需要，我可以列出所有。

起初我怀疑该函数没有被调用，我有点正确，因为更改下拉菜单不会执行该功能。如果直接调用该函数会执行（这是为了调试），但if（也不是else）部分确实执行了。我无法找到或弄清楚让它为我工作的任何事情。

请记住，我对javascript一无所知，可能会犯下最愚蠢的错误。

提前致谢。

CSHTML visjs Graph2d更改＆＃34;已加载＆＃34;数据集

0 个答案: