Javascript ChartJS仅在放大或缩小时显示数据

实际上，我正在使用ASP.NET和SQL Server。我正在使用ChartJS为我的网站制作图表。问题是当我在浏览器中放大或缩小时，ChartJS只显示结果

有人知道为什么吗？我正在使用AJAX从数据库中获取信息并制作动态图表

这是我的JavaScript：

        $(document).ready(function () {
        $.ajax({
            type: "POST", 
            url: "Graficas.asmx/obtenerGrafica",
            data: '',
            contentType: "application/json; charset=utf-8",
            dataType: "json", // dataType is json format
            success: function OnSuccess(response) {
                items = response.d;
                $.each(items, function (index, val) {
                    myChart.data.labels.push(val.Nombre);
                    myChart.data.datasets[0].data.push(val.Gastado);
                    nmbre.push(val.Nombre);
                    precio.push(val.Gastado);
                });
            },
            error: function onError(error) {
                console.log(error.d);
            },
        });
        var ctx = document.getElementById("myChart");
        var myChart = new Chart(ctx, {
            type: 'horizontalBar',
            data: {
                labels: [],
                datasets: [{
                    label: ['Mensual'],
                    data: [],
                    backgroundColor: [
                        'rgba(137, 107, 255, 0.3)'
                    ],
                    borderColor: [
                        'rgba(137, 107, 255, 1)',

                    ],
                    borderWidth: 1
                }
                ]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });           
    });

---

谢谢您。

初始化图表对象后，尝试调用ajax方法

$(document).ready(function () {

    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: [],
            datasets: [{
                label: ['Mensual'],
                data: [],
                backgroundColor: [
                    'rgba(137, 107, 255, 0.3)'
                ],
                borderColor: [
                    'rgba(137, 107, 255, 1)',

                ],
                borderWidth: 1
            }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });  
$.ajax({
        type: "POST", 
        url: "Graficas.asmx/obtenerGrafica",
        data: '',
        contentType: "application/json; charset=utf-8",
        dataType: "json", // dataType is json format
        success: function OnSuccess(response) {
            items = response.d;
            $.each(items, function (index, val) {
                myChart.data.labels.push(val.Nombre);
                myChart.data.datasets[0].data.push(val.Gastado);
                nmbre.push(val.Nombre);
                precio.push(val.Gastado);
            });
        },
        error: function onError(error) {
            console.log(error.d);
        },
    });         
});

---

在ajax调用之前添加两个数组：

var nomreArr= [];
var gastadoArr= [];    

然后在success函数中填充它们 然后将它们分配给数据集

nomreArr.push(val.Nombre);
gastadoArr.push(val.Gastado);

myChart.data.datasets[0].data = gastadoArr;
myChart.data.datasets[0].labels= nomreArr;
myChart.update();

此外，您的HTML应该如下所示：

---

我也遇到了他同样的问题，唯一能够解决这个问题的方法是在关闭document.ready块之前添加以下内容：

setTimeout(function() {
    myChart.update();
},1000);

虽然不太理想，但这是我唯一能做的事情，让图表始终呈现出来——在1秒钟的延迟后调用“update”方法