Графики не отображаются на странице ASP.NET MVC - PullRequest
Новая
       2

Графики не отображаются на странице ASP.NET MVC

0 голосов
/ 08 июня 2018

Я довольно новичок в asp.net, поэтому я попытался добавить к моему виду простую гистограмму с charts.js, но все, что я получил, это пустая страница.

Контроллер 

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        List<string> iData = new List<string>();
        List<string> iData2 = new List<string>();

        iData.Add("Sam");
        iData2.Add("555");
        iData.Add("Alex");
        iData2.Add("666");
        iData.Add("Michael");
        iData2.Add("777");

        ViewBag.Value_List = iData2;
        ViewBag.Name_List = iData;

        return View();
    }
}

Просмотр: 

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Charts</title>
    <script src="~/Scripts/Chart.min.js"></script>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>

        var barChartData =
            {
                labels: [@Html.Raw(ViewBag.Name_List)],
                datasets: [{
                    label: 'ChartTest',
                    backgroundColor: [
                        "#f990a7",
                        "#aad2ed",
                        "#9966FF",
                        "#99e5e5",
                        "#f7bd83",
                    ],
                    borderWidth: 2,
                    data: [@ViewBag.Value_List]
                }]
            };

            window.onload = function () {
                var ctx1 =     document.getElementById("barcanvas").getContext("2d");
                window.myBar = new Chart(ctx1,
                    {
                        type: 'bar',
                        data: barChartData,
                        options:
                            {
                                title:
                                {
                                    display: true,
                                    text: "ChartTest"
                                },
                                responsive: true,
                                maintainAspectRatio: true
                            }
                    });
            }
    </script>
</head>
<body>
    <div style="text-align: center">
        <canvas id="barcanvas"></canvas>
    </div>
</body>
</html>

Я пытался помочь мне с некоторыми уроками, но у меня ничего не получалось.

Может кто-нибудь сказать мне, что я делаю неправильно?

1 Ответ

0 голосов
/ 12 июня 2018

Требуются два изменения:

Сериализация данных в JSON в контроллере: 

using System.Web.Script.Serialization;

var js = new JavaScriptSerializer();
ViewBag.Value_List = js.Serialize( iData2);
ViewBag.Name_List = js.Serialize(iData);

Снять лишние квадратные скобки в представлении: 

labels: @Html.Raw(ViewBag.Name_List),

data: @Html.Raw(ViewBag.Value_List)

Вынеобходимо создать «вставляемый» JavaScript для представления данных. 

labels: ["555","666","777"] ,

data: ["Sam","Alex","Michael"]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...