ChartJS顯示圖表但在ASP網路核心中沒有資料

我試圖將來自 API 請求的一些資料顯示到 Chart JS 條形圖中。

模型：

public class MachineApiModel
{
    public string id { get; set; }
    public Production[] productions { get; set; }
    public string customerId { get; set; }
    public string siteId { get; set; }
    public string brand { get; set; }
    public string type { get; set; }
    public string serialNumber { get; set; }
    public string line { get; set; }
    public string ipAdres { get; set; }
    public int port { get; set; }
    public DateTime created { get; set; }
    public DateTime changed { get; set; }
}

public class Production
{
    public string id { get; set; }
    public string machineId { get; set; }
    public string purchaseOrder { get; set; }
    public DateTime startTime { get; set; }
}

public class ProductionChartModel
{
    [JsonProperty(PropertyName = "Brand")]
    public List<string> Brand { get; set; }

    [JsonProperty(PropertyName = "Port")]
    public List<int> Port { get; set; }
}

控制器：（接收來自 API 呼叫的機器模型串列）：

   public async Task<List<MachineApiModel>> GetMachineApiAsync()
    {
        List<MachineApiModel> Machines = new List<MachineApiModel>();
        HttpClient client = _api.Init();
        HttpResponseMessage res = await client.GetAsync("Machine");

        if (res.IsSuccessStatusCode)
        {
            try
            {
                var result = await res.Content.ReadAsStringAsync();
                Machines = JsonConvert.DeserializeObject<List<MachineApiModel>>(result);

            }
            catch (Exception ex)
            {
                _logger.LogError(ex, $"Something went wrong");
            }
        }

        return Machines;
    }

Index.cshtml.cs：我可以看到 JsonResult 是從模型資料中填充的。所以這是有效的。

    private readonly MachineController _machineController = new();
    private readonly ILogger<IndexModel> _logger;

    [BindProperty]
    public List<MachineApiModel> MachineApiModel { get; set; }

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    public async Task<IActionResult> OnGet()
    {
        MachineApiModel = await _machineController.GetMachineApiAsync();
        return Page();
    }

    public async Task<JsonResult> OnGetChartData()
    {
        MachineApiModel = await _machineController.GetMachineApiAsync();

        var chartModel = new ProductionChartModel();
        chartModel.Brand = new List<string>();
        chartModel.Port = new List<int>();

        foreach (var inv in MachineApiModel)
        {
            chartModel.Brand.Add(inv.brand);
            chartModel.Port.Add(inv.port);
        }

        return new JsonResult(chartModel);
    }

Index.cshtml：頁面上繪制了圖表，但由于某種原因沒有顯示資料。這就是我卡住的地方。所以它基本上是一個空圖表。

<p>Charts</p>
<div class="container">
    <canvas id="chart" width="500" height="300"></canvas>
</div>


<script>
   
    var myAmounts = [];
    var myCategories = [];
    var Machines;

    function showChart() {
        myAmounts = Machines.Port;
        myCategories = Machines.Brand;
        console.log(myAmounts);
        console.log(myCategories);

        let popCanvasName = document.getElementById("chart");
        let barChartName = new Chart(popCanvasName, {
            type: 'bar',
            data: {
                labels: myCategories,
                datasets: [{
                    label: 'Machines',
                    data: myAmounts,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.6)',
                        'rgba(54, 162, 235, 0.6)',
                        'rgba(255, 206, 86, 0.6)',
                        'rgba(75, 192, 192, 0.6)',
                        'rgba(153, 102, 255, 0.6)',
                    ]
                }]
            },
            options: {
                responsive: false,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    }


    function getChartData() {
        return fetch('./Index?handler=ChartData',
            {
                method: 'get',
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
            })
            .then(function (response) {
                if (response.ok) {
                    return response.text();
                } else {
                    throw Error('Response Not OK');
                }
            })
            .then(function (text) {
                try {
                    return JSON.parse(text);
                } catch (err) {
                    throw Error('Method Not Found');
                }
            })
            .then(function (responseJSON) {
                Machines = responseJSON;
                showChart();
            })
    }

    getChartData();

</script>

uj5u.com熱心網友回復：

您可以添加console.log(Machines)以檢查Console面板中的回應。然后你會發現回應的屬性名稱是camel case。

在下面更改您的代碼：

function showChart() {
        myAmounts = Machines.port;
        myCategories = Machines.brand;
        //.....
}

標籤：json asp.net 核心 图表.js

上一篇：如何反序列化這個嵌套的json回應并在Unity中使用多個Jobject保存陣列值

下一篇：從C#中的JSON陣列中洗掉屬性名稱