javascript - ChartJs - 从后端动态显示数据

Question

几天来我一直在为这个问题苦苦挣扎，真的需要一些帮助。我需要将渐变颜色和一些自定义样式应用于我们的 ChartJs 条形图，其中包含来自后端服务器的调用报告数据。我找到了一种如何应用样式和渐变的方法，但无法弄清楚如何配置数据集以显示来自服务器的正确数据，而不是一些随机数(例如 10、20、30)，就像我尝试使用 gradientGreen以下。有任何想法吗？

//主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>

//Chart的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
            }
        ]
    }
}