获取输入值并将其传递到JavaScript函数中，以便在ASP.NET核心Razor Pages中创建Chart.js图表

3vpjnl9f 于 2023-01-26 发布在 Chart.js

关注(0)|答案(1)|浏览(114)

Current look of my page
我试着把两个输入的值传递给clickupdate（）js函数，为显示的图表设置一个新的范围，数字代表将要显示的列表的索引，所以基本上图表应该从哪个索引呈现到哪个索引。

@page
@model statmath_web.Pages.Visualization.VisualizationMainModel
@{
    ViewData["Title"] = "CSV Data Visualization";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<html>
<head>

</head>
<body>
<center>

    <td >
        <input class="text-center param-input" id="Minimum_Parameter_Value"
        type="number" min="0" max="@Model.length" step="1"
        placeholder="Min" value="0" /> 
    </td>

    <td>
            <input class="text-center param-input" id="Maximum_Parameter_Value"
        type="number" min="0" max="@Model.length" step="1"
                   placeholder="Max" value="@Model.length"/>
    </td>

    <br />

    <button onclick="clickupdate()">Update Data</button>

    <canvas id="myChart" width="1200" height="700"></canvas>

<script>
    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: @Html.Raw(Json.Serialize(Model.TimeList.GetRange(0, 50))),
            datasets: [
                {
                    label: "VSE Value",
                    backgroundColor: "rgb(255, 255, 255)",
                    borderColor: "rgb(54, 162, 235)",
                    fill: false,
                    data: @Html.Raw(Json.Serialize(Model.ValueList.GetRange(0, 50))),
                }
            ]
        },
      options: {
        animation: false,
        parsing: false,
        responsive: true,
      },
    });
    
    function addData(chart, label, data) {
    chart.data.labels = label
    chart.data.datasets.forEach((dataset) => {
        dataset.data = data;
    });
    chart.update();
}

    function clickupdate(){
        labelsNew = @Html.Raw(Json.Serialize(Model.TimeList.GetRange(Number(Minimum_Parameter_Value) , Number(Maximum_Parameter_Value) - Number(Minimum_Parameter_Value))))
        dataNew = @Html.Raw(Json.Serialize(Model.ValueList.GetRange(Number(Minimum_Parameter_Value) , Number(Maximum_Parameter_Value) - Number(Minimum_Parameter_Value))))
        addData(myChart, labelsNew, dataNew);
    }

</script>

</center>
</body>

</html>

到目前为止，我尝试在js部分设置常量和变量，但这些抛出“'name'在当前上下文中不存在”（CS0103）。
我意识到我可以把这些作为jQuery字符串传递到我的URL中，但是对于这个任务来说，应该有一个更干净的方法。

chart.js

来源：https://stackoverflow.com/questions/75207853/take-input-values-and-pass-it-into-javascript-function-for-chart-js-chart-in-asp

1条答案

按热度按时间

jei2mxaa1#

需要在Javascript部分创建新的变量列表，然后在其上使用.slice（）。
参见更新代码：

@page
@model statmath_web.Pages.Visualization.VisualizationMainModel
@{
    ViewData["Title"] = "CSV Data Visualization";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<html>
<head>

</head>
<body>
<center>

    <td >
        <input class="text-center param-input" id="Minimum_Parameter"
        type="number" min="0" max="@Model.length" step="1"
        placeholder="Min" value="0" /> 
    </td>

    <td>
        <input class="text-center param-input" id="Maximum_Parameter"
        type="number" min="0" max="@Model.length" step="1"
        placeholder="Max" value="@Model.length"/>
    </td>

    <br />

    <button onclick="clickupdate()">Update Data</button>

    <canvas id="myChart" width="1200" height="700"></canvas>

<script>
    var ctx = document.getElementById("myChart").getContext("2d");

    var TimestampList = @Html.Raw(Json.Serialize(Model.TimeList));
    var ValueList = @Html.Raw(Json.Serialize(Model.ValueList));

    var myChart = new Chart(ctx, {
        type: "line",
        data: {
            labels: TimestampList,
            datasets: [
                {
                    label: "VSE Value",
                    backgroundColor: "rgb(255, 255, 255)",
                    borderColor: "rgb(54, 162, 235)",
                    fill: false,
                    data: ValueList,
                }
            ]
        },
      options: {
        animation: false,
        parsing: false,
        responsive: true,
      },
    });

    function addData(chart, label, data) {
    chart.data.labels = label
    chart.data.datasets.forEach((dataset) => {
        dataset.data = data;
    });
    chart.update();
}

    function clickupdate(){
        var pMin = document.getElementById('Minimum_Parameter').value;
        var pMax = document.getElementById('Maximum_Parameter').value;
        labelsNew = TimestampList.slice(pMin, pMax);
        dataNew = ValueList.slice(pMin, pMax);
        addData(myChart, labelsNew, dataNew);
    }

</script>

</center>
</body>

</html>

赞(0）回复(0）举报 2023-01-26

我来回答

获取输入值并将其传递到JavaScript函数中，以便在ASP.NET核心Razor Pages中创建Chart.js图表

1条答案

相关问题

热门标签

最新问答