CanvasJS 图表不显示答案

【问题标题】：CanvasJS chart not showCanvasJS 图表不显示
【发布时间】：2020-12-22 19:26:49
【问题描述】：

我在我的项目中使用 CanvasJS 图表。加载屏幕时没有显示任何内容。但是当我打开检查器或调整浏览器大小时，一切正常。有人有想法吗？

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url: "/Home/Result/",
            type: "Get",
            data: { id: 1 }
        }).done(function (result) {

            var chart = new CanvasJS.Chart("chartContainer",
                {
                    theme: "light1", // "light2", "dark1", "dark2"
                    animationEnabled: false, // change to true
                    title: {
                        text: "Basic Column Chart"
                    },
                    data: [
                        {
                            // Change type to "bar", "area", "spline", "pie",etc.
                            type: "column",
                            dataPoints: result
                        }
                    ]
                });
        });


        chart.render();
    });

【问题讨论】：

您的控制台有任何错误吗？ result 的 done 函数中的数据是否正确？
没有错误或类似的东西。当我打开检查器或调整浏览器大小时一切正常

标签： javascript canvasjs

【解决方案1】：

AJAX 请求是异步的。在 done 内部调用 chart.render(); 可以正常工作。我还会 suggest 你在 AJAX 请求之外创建图表一次并更新数据点并在 AJAX 内呈现。下面是工作代码。

$(function() {
    var chart = new CanvasJS.Chart("chartContainer", {
        theme: "light1", // "light2", "dark1", "dark2"
        animationEnabled: false, // change to true
        title: {
            text: "Basic Column Chart"
        },
        data: [{
            // Change type to "bar", "area", "spline", "pie",etc.
            type: "column",
            dataPoints: result
        }]
    });

    $.ajax({
        url: "/Home/Result/",
        type: "Get",
        data: {
            id: 1
        }
    }).done(function(result) {
        chart.options.data[0].dataPoints = result;
        chart.render();
    });
});

【讨论】：