使用JSON更新Chart.js，无法读取未定义的属性“长度”

Question

我有一个关于如何通过ajax和JSON更新Chart.js图表​​的问题。我一直在尝试和阅读SO问题，但我遇到了CHart.js Cannot read property 'length' of undefined的问题

这是我的cshtml chart.js脚本：

<script>
    $(document).ready(function () {
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{}]
            },
            // Configuration options go here
            options: {}
        });
        $("button").click(function () {
            $.ajax({
                type: "GET",
                url: '@Url.Action("GetChartData", "Plot")',
                dataType: 'json',
                success: function (result) {
                    alert(JSON.stringify(result));
                    chart.data = result;
                    chart.update();
                }
            });
        });
    });
</script>

这是我的控制器：

 public JsonResult GetChartData()
 {
     List<String> datList = new List<string>();
     dataList.Add("1");
     dataList.Add("2");
     dataList.Add("3");
     dataList.Add("4");
     dataList.Add("5");
     string output = new JavaScriptSerializer().Serialize(dataList);
     return Json(output, JsonRequestBehavior.AllowGet);
 }

这是浏览器控制台的屏幕截图：

在此图片中，您可以看到JSON响应（不确定是否存在问题）和Chart.js错误。

谢谢您的帮助！

Answer 1

好像你给的是错误格式的数据。暂时忽略ajax请求，您需要执行以下操作：

$(document).ready(function () {
        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'line',

            // The data for our dataset
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{}]
            },
            // Configuration options go here
            options: {}
        });
        $("button").click(function () {
            chart.data.datasets = [{data: [1,2,3,4,5]}]
            chart.update()
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>button</button>
<canvas id="myChart" >

您从请求中获得的响应是​​一个字符串，因此您实际需要执行以下操作：

chart.data.datasets = [{data: JSON.parse(response)}]