Использование данных из модели в Chart.js MVC c #

Question

Я пытаюсь создать диаграмму с помощью Chart.js, но я не могу перенести данные из моей модели в диаграмму ... Может кто-нибудь мне помочь с этим?

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>
<script >
var ctx = document.getElementById('myChart').getContext('2d');
@{ 
    List<String> listKeys = new List<string>();
    List<int> listValues = new List<int>();
    foreach(var x in Model.PageViews)
    {
        listKeys.Add(x.Key + "");
        listValues.Add(x.Value);
    }
}

var chart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: @listKeys,
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: @listValues
        }]
    },
    options: {}
});

Я пробовал нескольковещи, но ничего не работает ...

Answer 1

Код внутри блока @{ } на стороне сервера.Другое содержимое тега script относится к клиентской части.

C # запускает ToString() метод при использовании @listKeys / @listValues.Он генерирует строку типа System.Collections.Generic.List[System.String] вместо содержимого списков.Вместо этого вам нужно сгенерировать объекты json.

Используйте @Html.Raw(Json.Serialize(listKeys)) вместо @listKeys для получения правильного json-объекта с данными.

PS Не рекомендуется использовать много серверной логики внутри представлений.Вы можете удалить свой блок @{} и получить json для Model.PageViews.Keys и Model.PageViews.Values

Answer 2

Не рекомендуется использовать переменные .NET в коде JavaScript.Правильный путь - создать скрытые элементы html для значений, которые вы хотите использовать в функции js, или использовать API, который возвращает данные диаграммы как объект Json.