ChartJs - динамическое отображение данных из серверной части

Question

Я боролся с этим уже несколько дней, мне действительно нужна помощь. Мне нужно применить цвета градиента и некоторые пользовательские стили к нашей гистограмме ChartJs, которая содержит данные отчетов о вызовах, которые поступают с внутреннего сервера. Я нашел способ применения стилей и градиентов, но не могу понять, как настроить наборы данных для отображения правильных данных с сервера, а не случайных чисел (например, 10, 20, 30), как я пытался для градиента Greenниже. Есть идеи?

// основной html

<div class="row mb-4 mt-4">
    <div class="col-9">
        <h4 class="text-center">Call Distribution</h4>
        @await Component.InvokeAsync("HourlyCallTotals", new { from = Model.From, to = Model.To, customer = Model.customer, site = Model.site })
</div>

// html компонента

@model CallReporter.ViewModels.BasicFilter
<div id="hourlyChart">
</div>
<script>
    var HourlyCallData = @Html.RenderAction("HourlyTotals", "Calls", "", new { from = Model.from.ToString("s"), to = Model.to.ToString("s"), customer = Model.customer, site = Model.site })
</script>

// соответствующая часть функции JS для диаграммы

function hoursChartAjax() {
    var hourlyChart = $('#hourlyChart').html('<canvas width="400" height="300"></canvas>').find('canvas')[0].getContext('2d');
    // set gradients for bars
    let gradientGreen = hourlyChart.createLinearGradient(0, 0, 0, 400);
    gradientGreen.addColorStop(0, '#66d8b0');
    gradientGreen.addColorStop(1, '#1299ce');

    let gradientBlue = hourlyChart.createLinearGradient(0, 0, 0, 400);
    gradientBlue.addColorStop(0, '#1299ce');
    gradientBlue.addColorStop(1, '#2544b7');

    if (hourlyChart !== undefined) {
        $.get(base + "Calls/HourlyTotals", { from: from.format(), to: to.format(), customer: currentCustomer.id, site: currentSite }, function (data) {
            // set the default fonts for the chart
            Chart.defaults.global.defaultFontFamily = 'Nunito';
            Chart.defaults.global.defaultFontColor = '#787878';
            Chart.defaults.global.defaultFontSize = 12;

            var chart = new Chart(hourlyChart, {
                type: 'bar',
                data: {
                    labels: ['6AM', '9AM', '12AM', '3PM', '6PM', '9PM', '12PM'],
                    datasets: [
                        {
                            label: 'Total outgoing calls',
                            backgroundColor: gradientBlue,
                            data: HourlyCallData
                        },
                        {
                            label: 'Total incoming calls',
                            backgroundColor: gradientGreen,
                            data: [10, 20, 30]
                        }
                    ]
                },

// соответствующая часть внутреннего кода, которая возвращает данные вызова в виде Json

 totalsContainer.Totals = allCallsHourly.OrderBy(x => x.Date).ToList();

             return Json(new
            {
                labels = totalsContainer.Totals.Select(x => x.Date.ToString("hh tt")),
                 datasets = new List<object>() {
                    new { label = "Total Outgoing Calls", backgroundColor = "#1299CE", data = totalsContainer.Totals.Select(x => x.TotalOutgoingCalls) },                    
                    new { label = "Total Incoming Calls", backgroundColor = "#00B050", data = totalsContainer.Totals.Select(x => x.TotalIncomingCalls) } }
            });

Прикрепленный img с консольным журналом и ошибкой, после попытки решения ниже:

Answer 1

Если данные поступают в правильном формате, вы можете просто написать это:

var chart = new Chart(hourlyChart, {
    type: 'bar',
    data: data: data
}

Если нет, вы можете сделать это так:

var chart = new Chart(hourlyChart, {
    type: 'bar',
    data: {
        labels: data.labels,
        datasets: [
            {
                label: data.datasets[0].label,
                backgroundColor: gradientBlue,
                data: data.datasets[0].data
            },
            {
                label: data.datasets[1].label,
                backgroundColor: gradientGreen,
                data: data.datasets[1].data
            }
        ]
    }
}