未显示CanvasJS图表

Question

我在我的项目中使用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();
    });

Answer 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();
    });
});