Question

我是网页创建的新手，因此我在后端和前端之间的通信方面遇到了一些问题。目前，我想显示一个简单的图表（我正在使用chart.js），其中包含我在单独的c＃方法中计算出的数据。

我的c＃方法如下：

using System;
using System.Linq;

namespace Programm.Logic
{
    public class DoSomethingIntelligent
    {    
        public int[] GetRandomData(int number)
        {
            int Min = 0;
            int Max = 20;
            Random randNum = new Random();
            int[] data = Enumerable
                .Repeat(0, number)
                .Select(i => randNum.Next(Min, Max))
                .ToArray();

            return data;
        }
    }
}

现在，我创建.cshtml文件的图表信息。到目前为止，数据已经过硬编码，但是我想使用上面的方法（GetRandomData()）创建数据。我该怎么做呢？我尝试过：

@Model.GetRandomData(6);

但是这给出了“ System.Int32 []”的输出。即使这行得通，我也不会打结如何将这些数据解析到图表中。我的.cshtml文件如下所示：

@model Programm.Logic.DoSomethingIntelligent

<!DOCTYPE html>

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <title>My Chart.js Chart</title>
</head>

<body>

    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        let myChart = document.getElementById('myChart').getContext('2d');

        let thisChart = new Chart(myChart, {
            type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data: {
                labels: ['1', '2', '3', '4', '5', '6'],
                datasets: [{
                    label: 'test',
                    data: [
                        617594,
                        181045,
                        153060,
                        106519,
                        105162,
                        95072
                    ]
                }]
            }
        });

    </script>


</body>
</html>

非常感谢！

Answer 1

但是当我尝试打印出@ Model.GetRandomData（6）时，它显示 “ System.Int32 []”

尝试这样的代码时，您将得到上面提到的东西。

var data = @Model.GetRandomData(6);

如果您检查页面的视图源，Razor将呈现如下所示的输出。

 var data = System.Int32[];

之所以会这样，是因为您的GetRandomData方法返回一个int数组，并且在razor尝试执行C＃代码时，它基本上是在调用ToString()并返回类型。

如果要将C＃方法生成的数组转换为JavaScript数组，则需要序列化该方法的输出。

以下内容应该起作用。

var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.GetRandomData(6)));
let myChart = document.getElementById('myChart').getContext('2d');

let thisChart = new Chart(myChart, {
    type: 'bar', 
    data: {
        labels: ['1', '2', '3', '4', '5', '6'],
        datasets: [{
            label: 'test',
            data: data
        }]
    }
});

通过.cshtml文件

1 个答案: