我无法使用 AJAX 更新我的折线图数据

Question

我想制作一个ajax函数来更新我的折线图，折线图中的数据应该根据月份排序。应该有一个按钮，用于将所选月份的值提交给函数以获取图表的数据。

@page
@model Task_CRM.Pages.TrendChartModel
@{
    ViewData["Title"] = "Monthly Line Chart";
}
<div class="card">
    <div class="card-header center">
        <center><strong><h5>Trend Interaksi</h5></strong></center>
    </div>
    <div class="card-body">
        <form method="post">
            <label for="selectMonth">Pilih Bulan:  </label>
            <select id="selectMonth" asp-for="SelectedMonth" asp-items="Model.month"></select>
            <button type="submit" class="btn btn-primary" id="updateChartMonth">Update Chart</button>
        </form>
        <div>
            <canvas id="Trend" width="400" height="200"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        $('#monthDropdown').change(function () {
            var selectedMonth = $(this).val();
            $.ajax({
                url:'/TrendChart?handler=GetMonthlyData',
                type:'GET',
                data: { SelectedMonth: selectedMonth },
                success: function(data){
                    var Dates = Data.date;
                    var Dates_Values = Data.Count;

                    var TrendChart = new Chart(document.getElementById('Trend'), {
                        type: 'line',
                        data: {
                            labels: Dates,
                            datasets: [{
                                label: 'Total Interactions',
                                data: Dates_Value,
                                fill: false,
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 2,
                                pointRadius: 5,
                                pointHoverRadius: 8,
                                pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            aspectRatio: 1,
                            title: {
                                display: true,
                                text: 'Total Interactions Over Time'
                            },
                            scales: {
                                x: {
                                    type: 'category',
                                    labels: Dates,
                                    position: 'bottom',
                                    title: {
                                        display: true,
                                        text: 'Tanggal'
                                    }
                                },
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: 'Total Interactions'
                                    }
                                }
                            }
                        }
                    });
                }error:
                    console.error('Error Fetching Updated Data');
            })
        })
    })
    
</script>

@{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.EntityFrameworkCore;
using Task_CRM.Data;
using Task_CRM.Models;
using System.Linq;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.Rendering;
using System;

namespace Task_CRM.Pages
{
    public class TrendChartModel : PageModel
    {
        private readonly Task_CRMContext _context;

        public TrendChartModel(Task_CRMContext context)
        {
            _context = context;
        }

        [BindProperty]
        public List<Interaction> Interaction { get; set; }
        [BindProperty]
        public SelectList month { get; set; }
        public int SelectedMonth { get; set; }


        public void OnGet()
        {
            var currentUser = HttpContext.Session.GetString("Username");

            if (currentUser != null)
            {
                ViewData["Navbar"] = currentUser;
            }

            var uniqueMonth = _context.Interaction.Select(m => m.Tanggal.Month).Distinct().ToList();

            month = new SelectList(uniqueMonth);
        }

        //[HttpGet]
        public IActionResult OnGetGetMonthlyData(int SelectedMonth)
        {

            var Dates = _context.Interaction.Where(d => d.Tanggal.Month == SelectedMonth).Select(d => d.Tanggal).ToList();
            var Count = _context.Interaction.Where(d => d.Tanggal.Month == SelectedMonth).Count();

            var Data = new { Dates, Count };

            return new JsonResult(Data);
        }
    }
}

当我尝试我的代码时，图表的值没有显示并且

Answer 1

您的代码中存在几个问题：

1.您的html代码不包含

id="monthDropdown"

元素，因此无法命中change事件。你的select元素是：

<select id="selectMonth"></select>

，所以对应的js应该是：

 $('#selectMonth').change(function () {

2.

success

函数中的参数是

data

，所以需要使用

data

或

data.xxx

代替

Data

来获取响应数据。

3.您的后端响应json数据如下：

{"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":2}

响应数据是驼峰式大小写，所以你需要改变你的ajax：

var Dates = data.dates;    
var Dates_Values = data.count;

4.你的ajax中的数据值拼写错误，它是：

data: Dates_Values,   //not Dates_Value`

5.折线图包含x y轴，你的x轴是日期数组，y轴是单个计数，这是不正确的，你需要修改以下后端代码：（不确定你的模型是什么样的，哪个如果你想把它作为y轴的数据，你需要自己改变，使这个

Count

成为一个数组。注意：linq应该

GroupBy()

一列，然后

Count()

）

var Count = data.Where(d => d.Tanggal.Month == SelectedMonth).Count();

使其成为一个数组，并且x轴和y轴的数据量应该相同。简单地说，如果您的日期包含两个值，那么您的计数也需要包含两个值。例如，响应 json 数据应如下所示：

{"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":[2.2,3]}

---

整个工作代码

@{
    ViewData["Title"] = "Monthly Line Chart";
}
<div class="card">
    <div class="card-header center">
        <center><strong><h5>Trend Interaksi</h5></strong></center>
    </div>
    <div class="card-body">
        <form method="post">
            <label for="selectMonth">Pilih Bulan:  </label>
            <select id="selectMonth" asp-for="SelectedMonth" asp-items="Model.month"></select>
            <button type="submit" class="btn btn-primary" id="updateChartMonth">Update Chart</button>
        </form>
        <div>
            <canvas id="Trend" width="400" height="200"></canvas>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<script>
    $(document).ready(function () {
        $('#selectMonth').change(function () {
            var selectedMonth = $(this).val();
            $.ajax({
                url:'/TrendChart?handler=GetMonthlyData',
                type:'GET',
                data: { SelectedMonth: selectedMonth },
                success: function(data){
                    //the parameter in the function is `data`
                    //you can hard coded it for testing: data={"dates":["2024-02-05T00:00:00","2024-02-15T00:00:00"],"count":[2.2, 3]};
                    var Dates = data.dates;    
                    var Dates_Values = data.count;    //the response json data is camel case

                    var TrendChart = new Chart(document.getElementById('Trend'), {
                        type: 'line',
                        data: {
                            labels: Dates,
                            datasets: [{
                                label: 'Total Interactions',
                                data: Dates_Values,     //it should be `Dates_Values`
                                fill: false,
                                borderColor: 'rgba(75, 192, 192, 1)',
                                borderWidth: 2,
                                pointRadius: 5,
                                pointHoverRadius: 8,
                                pointBackgroundColor: 'rgba(75, 192, 192, 1)',
                            }]
                        },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            aspectRatio: 1,
                            title: {
                                display: true,
                                text: 'Total Interactions Over Time'
                            },
                            scales: {
                                x: {
                                    type: 'category',
                                    labels: Dates,
                                    position: 'bottom',
                                    title: {
                                        display: true,
                                        text: 'Tanggal'
                                    }
                                },
                                y: {
                                    beginAtZero: true,
                                    title: {
                                        display: true,
                                        text: 'Total Interactions'
                                    }
                                }
                            }
                        }
                    });
                },
                error: function () {
                    console.error('Error Fetching Updated Data');
                }

                    
            })
        })
    })
    
</script>

@{
    await Html.RenderPartialAsync("_ValidationScriptsPartial");
}

后端：

public IActionResult OnGetGetMonthlyData(int SelectedMonth)
{
    //hard coded for easy testing
    var Dates = new[] { "2024-02-05T00:00:00", "2024-02-15T00:00:00" };
    var Count = new[] { 2.2,3};

    var Data = new { Dates, Count };

    return new JsonResult(Data);
}

结果：

Answer 2

我根据您的建议对我的代码进行了一些更改，但在根据月份显示图表时仍然遇到一些麻烦，当我从选择标签中选择一个时，它只显示所有数据，而不是仅显示某些数据月

这是我的后端代码：

var GroupedDates = _context.Interaction.GroupBy(i => i.Tanggal)
                         .Select(group => new
                         {
                             Tanggal = group.Key,
                             Count = group.Count()
                         })
                         .OrderBy(item => item.Tanggal)
                         .ToList();
var Dates = GroupedDates.Select(item => item.Tanggal).ToList();
var Values = GroupedDates.Select(item => item.Count).ToList();
var Data = new { Dates, Values };