ASP. Net Core, мой график Google не будет отображаться - PullRequest
Новая
       41

ASP. Net Core, мой график Google не будет отображаться

1 голос
/ 16 марта 2020

Хорошо, проблема в том, что моя диаграмма Google не отображается. Я довольно плохо знаком с работой с ASP. NET основными приложениями, и я делаю школьный проект. Это пример, который работает. Я пытаюсь отобразить данные из списка, которые получают данные из базы данных, но мне кажется, что они не работают.

Эти жестко закодированные данные работают нормально: 

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Time', 'Data'],
                ['2004', 1000],
                ['2005', 1170],
                ['2006', 660],
                ['2007', 1030]
            ]);

            var options = {
                title: 'Temperature',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
        }
    </script>
</head>
<body class="container-fluid lead">
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>

Но когда я пытаюсь заменить жестко закодированные данные на foreach-l oop, они не отображаются. Страница просто пуста. Это мой drawChart () с foreach-l oop. 


            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Time', 'Data'], 
                @foreach (var item in Model.measurementDataList)
                {
                   <text>['@item.TimeStamp', @item.MeasuredValue],</text>
                }

                ]);

Я вывел некоторые данные из той же базы данных в таблицу. Таким образом, метод, который я использовал для заполнения списка, работает. Это мой метод получения данных из базы данных: 

public List<MeasurementData> GetMeasurementData(string connectionString)
        {
            List<MeasurementData> measurementDataList = new List<MeasurementData>();

            SqlConnection con = new SqlConnection(connectionString);

            string sqlQuery = "SELECT Timestamp, MeasuredValue FROM MEASUREDATA";

            SqlCommand cmd = new SqlCommand(sqlQuery, con);

            con.Open();
            SqlDataReader dr = cmd.ExecuteReader();

            while (dr.Read())
            {
                MeasurementData measureParameter = new MeasurementData();

                measureParameter.TimeStamp = dr["Timestamp"].ToString();
                measureParameter.MeasuredValue = Convert.ToDouble(dr["MeasuredValue"]);

                measurementDataList.Add(measureParameter);
            }
            return measurementDataList;
        }

А вот OnGet (). 

        public void OnGet()
        {
            SensorConfig sensorConfig = new SensorConfig();
            connectionString = _configuration.GetConnectionString("ConnectionString");
            measurementDataList = sensorConfig.GetMeasurementData(connectionString); 
        }

просмотр источника данных: 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MonitorLog - MonitoringApplication</title>
    <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/site.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" href="/">MonitoringApplication</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/MonitorLog">Monitor log</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" href="/SensorInformation">About Sensors</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            <html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawChart);


            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Time', 'Data'], 

                ]);

            var options = {
                title: 'Temperature',
                curveType: 'function',
                legend: { position: 'bottom' }
            };

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(data, options);
        }
    </script>
</head>
<body class="container-fluid lead">
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>
</html>
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2020 - MonitoringApplication - <a href="/Privacy">Privacy</a>
        </div>
    </footer>

    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/js/site.js?v=dLGP40S79Xnx6GqUthRF6NWvjvhQ1nOvdVSwaNcgG18"></script>


</body>
</html>

1 Ответ

0 голосов
/ 16 марта 2020

Здесь возникает ошибка: 

@foreach (var item in Model.measurementDataList)
                {
                   <text>['@item.TimeStamp', @item.MeasuredValue],</text>
                }

Потому что, если вы визуализируете C# в cs html напрямую, ASP. NET Ядро HTML закодирует ваш скрипт.

Чтобы приложение работало, рассмотрите возможность изменения сценария на 

            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Time', 'Data'], 
                @foreach (var item in Model.measurementDataList)
                {
                   Html.Raw($"['{item.TimeStamp}', {item.MeasuredValue}],")
                }

                ]);

. Хотя это может решить вашу проблему, рендеринг данных с C# до HTML не является хорошей практикой.

Я настоятельно рекомендую вам написать API, который возвращает ваши данные, и вы можете написать чистый javascript, чтобы получить данные.

Например: 

$.get('/api/mychartdata', function(data) {
    google.visualization.arrayToDataTable(data);
})

И data отображается как JSON из вашего ASP. NET Core Web API.

Если вы не знакомы с Web API, прочтите документ здесь:

https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-3.1&tabs=visual-studio

...