ASP.Net Core,我的Google图表不会显示

问题描述 投票:0回答:1

[好,所以我遇到的问题是我的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循环替换硬编码数据时,它将不会显示。页面只是空白。这是我的带有一个foreach循环的drawChart()。


            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); 
        }
c# asp.net-core google-visualization
1个回答
0
投票

出现错误:

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

因为如果直接在cshtml中呈现C#,ASP.NET Core将对脚本进行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从ASP.NET Core Web API中呈现为JSON。

如果您不熟悉Web API,请在这里阅读文档:

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

© www.soinside.com 2019 - 2024. All rights reserved.