ElenaRez Ответов: 1

Как передать входные аргументы функции в тело блока

Я внедряю asp.net основной проект. В представлении razor мой код выглядит следующим образом:

В тег div, я называю PieChartShow(XLabels,YValues,секторная диаграмма); и я хочу передать XLabels, YValues и круговую диаграмму в качестве входных параметров функции PieChartShow JavaScript и третий параметр "круговую диаграмму" - это идентификатор связанного полотна. Но теперь моя проблема заключается в том, что myXLabels неизвестен внутри блока данных в функции PieChartShow. Я буду признателен, если кто-нибудь предложит мне, как я могу передать XLabels и YValues в функцию PieChartShow.

Что я уже пробовал:

@using System.Linq;

@model CSDDashboard.TempClasses.ChartListObjects
@{

    var XLabels = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.DimensionOne).ToList());
    var YValues = Newtonsoft.Json.JsonConvert.SerializeObject(Model.TotalReqStatus.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Pie Chart";
    //-----------------
    var XLabels1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList());
    var YValues1 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedTimeAvg.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
    //------------------
    var XLabels2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.DimensionOne).ToList());
    var YValues2 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedPercent.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
    //------------------
    var XLabels3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList());
    var YValues3 = Newtonsoft.Json.JsonConvert.SerializeObject(Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList());
    ViewData["Title"] = "Line Chart";
}


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @**@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

        html, body, h1, h2, h3, h4, h5 {
            font-family: "Raleway", sans-serif
        }
    </style>
</head>

<body>
    <canvas id="piechart" style="width:100%; height:500px"></canvas>
    <canvas id="linechart1" style="width:100%; height:500px"></canvas>
    <canvas id="linechart2" style="width:100%; height:500px"></canvas>
    <canvas id="linechart3" style="width:100%; height:500px"></canvas>
<div class="container" style="width:100%; height:500px">
        <div class="row">
 </div>
            <div class="col-3">
                @*style="width:30%">*@
                <!-- pie chart -->
                <script type="text/javascript">
@*Pie chart eliminated*@
                    PieChartShow(XLabels,YValues,piechart);
                </script>
                <!--cell 4 row 1-->
            </div>
        </div>
        <div class="row">
            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels1, YLabels1,linechart1);
                </script>
                <!--cell 1 row 2-->
            </div>
            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels2, YLabels2,linechart2);
                </script>
                <!--cell2 row 2-->
            </div>


            <div class="col-4">
                <!-- line chart -->
                <script type="text/javascript">
                    LineChartShow(XLabels3, YLabels3,,linechart3);
                </script>
                <!--cell3 row3-->
            </div>
       </div>
    </div>

</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    var PieChartShow =
    $(function () {
        // var chartName = "piechart";
Here is where I have problem in getting arguments[0]
        var myXLabels = arguments[0];
        var YYalues = arguments[1];
        var chartName = arguments[2];
    var ctx = document.getElementById(chartName).getContext('2d');
    var data = {
    labels: @Html.Raw(myXLabels),
    datasets: [{
    label: "API Charts",
    backgroundColor: [
    'rgba(255, 99, 132, 0.2)',
    'rgba(54, 162, 235, 0.2)',
    'rgba(255, 206, 86, 0.2)',
    'rgba(75, 192, 192, 0.2)',
    'rgba(153, 102, 255, 0.2)',
    'rgba(255, 159, 64, 0.2)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
    ],
    borderColor: [
    'rgba(255,99,132,1)',
    'rgba(54, 162, 235, 1)',
    'rgba(255, 206, 86, 1)',
    'rgba(75, 192, 192, 1)',
    'rgba(153, 102, 255, 1)',
    'rgba(255, 159, 64, 1)',
    'rgba(255, 0, 0)',
    'rgba(0, 255, 0)',
    'rgba(0, 0, 255)',
    'rgba(192, 192, 192)',
    'rgba(255, 255, 0)',
    'rgba(255, 0, 255)'
    ],
    borderWidth: 1,
    data: @Html.Raw(YValues)
    }]
    };

    var options = {
    maintainAspectRatio: false,
    scales: {
    yAxes: [{
    ticks: {
    min: 0,
    beginAtZero: true
    },
    gridLines: {
    display: true,
    color: "rgba(255,99,164,0.2)"
    }
    }],
    xAxes: [{
    ticks: {
    min: 0,
    beginAtZero: true
    },
    gridLines: {
    display: false
    }
    }]
    }
    };

    var myChart = new  Chart(ctx, {
    options: options,
    data: data,
    type:'pie'

    });
    });

    @**@
var LineChartShow = $(function () {

            var chartName = arguments[2];
            var ctx = document.getElementById(chartName).getContext('2d');
            var data = {
                labels: @Html.Raw(arguments[0]),
                @*labels: @Html.Raw(),*@
                @*labels: @Html.Raw(),*@
                datasets: [{
                    label: "API Charts",
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 0, 0)',
                        'rgba(0, 255, 0)',
                        'rgba(0, 0, 255)',
                        'rgba(192, 192, 192)',
                        'rgba(255, 255, 0)',
                        'rgba(255, 0, 255)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 0, 0)',
                        'rgba(0, 255, 0)',
                        'rgba(0, 0, 255)',
                        'rgba(192, 192, 192)',
                        'rgba(255, 255, 0)',
                        'rgba(255, 0, 255)'
                    ],
                    borderWidth: 1,
                    data: @Html.Raw(YValues1)
            }]
            };

            var options = {
                maintainAspectRatio: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        },
                        gridLines: {
                            display: true,
                            color: "rgba(255,99,164,0.2)"
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            min: 0,
                            beginAtZero: true
                        },
                        gridLines: {
                            display: false
                        }
                    }]
                }
            };

            var myChart = new Chart(ctx, {
                options: options,
                data: data,
                type: 'line'

            });
        });

</script>

Richard MacCutchan

"как я могу передать XLabels и YValues в функцию PieChartShow."
Извините, что заявляю о бл***ной очевидности, но сначала вам нужно ввести их в этот текст кода.

1 Ответов

Рейтинг:
1

Richard Deeming

Переменные определяются в коде на стороне сервера. Чтобы перенести их на клиентский Javascript, вам нужно закодировать их и отправить клиенту вместе со скриптом.

В ASP.NET ядро, это довольно просто - вам просто нужно использовать Json.Serialize помощник.

Вам также нужно будет определить nnnChartShow функции, прежде чем вы сможете их вызвать.

@using System.Linq;

@model CSDDashboard.TempClasses.ChartListObjects
@{
    // NB: No point in setting the title multiple times; only one will be used:
    ViewData["Title"] = "Charts";
    
    var XLabels = Model.TotalReqStatus.Select(i => i.DimensionOne).ToList();
    var YValues = Model.TotalReqStatus.Select(i => i.Quantity).ToList();

    var XLabels1 = Model.GrantedTimeAvg.Select(i => i.DimensionOne).ToList();
    var YValues1 = Model.GrantedTimeAvg.Select(i => i.Quantity).ToList();

    var XLabels2 = Model.GrantedPercent.Select(i => i.DimensionOne).ToList();
    var YValues2 = Model.GrantedPercent.Select(i => i.Quantity).ToList();

    var XLabels3 = Model.GrantedApiToApplicantAvg.Select(i => i.DimensionOne).ToList();
    var YValues3 = Model.GrantedApiToApplicantAvg.Select(i => i.Quantity).ToList();
}
<!DOCTYPE html>
...
<script>
$(function(){
    function PieChartShow(xLabels, yValues, chartId) {
        var ctx = document.getElementById(chartId).getContext("2d");
        
        var data = {
            labels: xLabels,
            datasets: [{
                ...
                data: yValues
            }]
        };
        
        var options = { ... };
        var myChart = new Chart(ctx, { options: options, data: data, type: "pie" });
    }
    
    function LineChartShow(xLabels, yValues, chartId) {
        var ctx = document.getElementById(chartId).getContext("2d");
        
        var data = {
            labels: xLabels,
            datasets: [{
                ...
                data: yValues
            }]
        };
        
        var options = { ... };
        var myChart = new Chart(ctx, { options: options, data: data, type: "line" });
    }
    
    PieChartShow(@Json.Serialize(XLabels), @Json.Serialize(YValues), "piechart");
    
    LineChartShow(@Json.Serialize(XLabels1), @Json.Serialize(YValues1), "linechart1");
    
    LineChartShow(@Json.Serialize(XLabels2), @Json.Serialize(YValues2), "linechart2");
    
    LineChartShow(@Json.Serialize(XLabels3), @Json.Serialize(YValues3), "linechart3");
});
</script>