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

我已经为此挣扎了好几天了，真的需要一些帮助。我需要将渐变颜色和一些自定义样式应用到我们的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>

呼叫分配
@wait Component.InvokeAsync（“HourlyCallTotals”，new{from=Model.from，to=Model.to，customer=Model.customer，site=Model.site}）

//组件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>

@model CallReporter.ViewModels.BasicFilter
var HourlyCallData=@Html.RenderAction（“HourlyTotals”，“Calls”，“new{from=Model.from.ToString（“s”），to=Model.to.ToString（“s”），customer=Model.customer，site=Model.site}）

//图表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]
                        }
                    ]
                },

函数hoursChartAjax（）{
var hourlyChart=$（'#hourlyChart'）.html（''）.find（'canvas'）[0].getContext（'2d'）；
//设置钢筋的坡度
让gradientGreen=hourlyChart.createLinearGradient（0,0,0,400）；
gradientGreen.addColorStop（0，#66d8b0'）；
gradientGreen.addColorStop（1，#1299ce'）；
让gradientBlue=hourlyChart.createLinearGradient（0,0,0,400）；
gradientBlue.addColorStop（0，#1299ce'）；
gradientBlue.addColorStop（1'#2544b7'）；
if（hourlyChart！==未定义）{
$.get（base+“Calls/HourlyTotals”，{from:from.format（），to:to.format（），customer:currentCustomer.id，site:currentSite}，函数（数据）{
//设置图表的默认字体
Chart.defaults.global.defaultFontFamily='Nunito'；
Chart.defaults.global.defaultFontColor='#787878'；
Chart.defaults.global.defaultFontSize=12；
var图表=新图表（hourlyChart{
类型：'bar'，
数据：{
标签：['6AM'、'9AM'、'12AM'、'3PM'、'6PM'、'9PM'、'12PM']，
数据集：[
{
标签：'传出呼叫总数'，
背景颜色：渐变蓝，
数据：HourlyCallData
},
{
标签：“来电总数”，
背景颜色：渐变绿色，
数据：[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) } }
            });

totalscocontainer.Totals=allcallshoury.OrderBy（x=>x.Date.ToList（）；
返回Json（新的
{
labels=totalsContainer.Totals.Select（x=>x.Date.ToString（“hh-tt”），
数据集=新列表（）{
新建{label=“Total Outgoing Calls”，backgroundColor=“#1299CE”，data=totalscocontainer.Totals.Select（x=>x.TotalOutgoingCalls）}，
新建{label=“Total IncomingCalls”，backgroundColor=“#00B050”，data=totalsContainer.Totals.Select（x=>x.TotalIncomingCalls）}
});

尝试以下解决方案后，附加了img和控制台日志并出现错误：

---

如果数据格式正确，您只需编写以下内容：

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
            }
        ]
    }
}

---

尝试了两种解决方案，它们似乎都不起作用，图表根本无法呈现。当我尝试第二种解决方案时，控制台中出现错误：“JSON.parse位置1处的JSON中意外的标记o”……这表明我根本不应该解析这些数据？@ZoranK否，这意味着你从后端获取的数据无效。请尝试记录它并将输出附加到问题中。在控制台尝试解析数据之前，我已经记录了数据，你能看到OP中的图像并提供一些见解吗？当你编写

c时会发生什么onsole.log（data.datasets[0]）；console.log（data.datasets[0].label）

在

Chart.defaults.global….

stuff？@ZoranK.然后只需编写

data:data

而不是

data:JSON.parse（data）

@ZoranK。