ChartJ条形图未在y轴中显示正确值

wgxvkvu9  于 12个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(131)

我有一个动态加载图表js和asp.net核心的条形图。我试图从json对象填充yaxis值,但它总是给我值1。
下面是我的要求和代码
x1c 0d1x的数据
我想在x轴上绘制'Day',在y轴上绘制'TotalActual',请在下面找到我的代码

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
        console.log(WeeklyData);

        let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
        console.log(weeklylabels);
        
        var weeklydatasets = WeeklyData.map(y => y.TotalActual);

        
       
        var barChartDataWeekly = {
            labels: weeklylabels,
            datasets: [{
                data:weeklydatasets,
                backgroundColor: [
                    'rgba(0, 154, 221, 1)'                    
                ]
            }],
        };

        window.onload = function () {
            var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
            window.myBar = new Chart(ctxUPHHistory, {
                type: 'bar',
                data: barChartDataWeekly,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            ticks: {
                                beginAtZero: true,
                                stepSize:50
                                //// Include a dollar sign in the ticks
                                //callback: function (value, index, ticks) {
                                //    return value + '%';
                                //}
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        };

字符串
但y轴的值总是显示为1,感谢任何帮助。

var WeeklyData = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model.UDTSLDDailyPVA.ToList()))
        console.log(WeeklyData);

        let weeklylabels = [...new Set(WeeklyData.map((x) => x.Day))];
        console.log(weeklylabels);
        
        let weeklydatasets = (WeeklyData.map((y) => y.TotalActual));
        console.log(weeklydatasets);
        
       
        var barChartDataWeekly = {
            labels: weeklylabels,
            datasets: [{
                data: WeeklyData,
                backgroundColor: [
                    'rgba(0, 154, 221, 1)'                    
                ]
            }],
        };

        window.onload = function () {
            var ctxUPHHistory = document.getElementById('barChartUPHHistory').getContext("2d");
            window.myBar = new Chart(ctxUPHHistory, {
                type: 'bar',
                data: barChartDataWeekly,
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    parsing: {
                        xAxisKey: 'Day',
                        yAxisKey: 'TotalActual'
                    },
                    scales: {
                        y: {
                            ticks: {
                                beginAtZero: true,
                                stepSize:50
                                //// Include a dollar sign in the ticks
                                //callback: function (value, index, ticks) {
                                //    return value + '%';
                                //}
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });
        };

wecizke3

wecizke31#

您可以使用parsing property,例如:

options: {
  ...
  parsing : {
    xAxisKey : 'Day',
    yAxisKey : 'TotalActual'
  },
}

字符串
Here's an example

相关问题