Обновление Chart.js с помощью JSON, не может прочитать свойство 'length' с неопределенным

Question

У меня есть вопрос о том, как обновить диаграмму Chart.js через ajax и JSON. Я пытался и читал ТАК вопросы, но я столкнулся с проблемой, где 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)}]