在asp.net mvc中需要帮助Chart.js

A few days can make a graph, we need your guidance.

几天可以制作图表,我们需要您的指导。

Arrow displays the objects, but on the chart nothing is displayed. The search was not successful.

箭头显示对象,但在图表上不显示任何内容。搜索未成功。

My models:

public class Voting
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int Voice { get; set; }
    public DateTime DateVote { get; set; }
    public string IpAdress { get; set; }
}

My controller:

[HttpGet]
    public JsonResult GetVotings()
    {
        List<Voting> votings = db.Votings.ToList();


        return Json(votings, JsonRequestBehavior.AllowGet);
    }

Probably the main problem in the script calling the data did. While it is possible the controller is not properly configured to output data, will be very glad of your help.

可能是调用数据的脚本中的主要问题。虽然可能控制器未正确配置为输出数据,但您将非常高兴得到您的帮助。

My View:

 <canvas id="ChartVote" width="300" height="200"></canvas>
    <script type="text/javascript" charset="utf-8">
        $(function () {
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                url: '/Chart/GetVotings',
            }).done(function (votings) {
                console.log(votings);
                $.each(votings, function (index, data) {
                    myChart.labels.push(data.Name);
                    myChart.datasets[0].data.push(data.Voice);
                });
            });
        });
        var ctx = document.getElementById("ChartVote");
        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                    label: '# of Votes',
                    data: [],
                    backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });
    </script>

1 个解决方案

#1

Your code has few problems ! First of all, inside your $.each you are trying to access labels property of myChart. But you did not define what myChart variable is. So you are going to get an undefined error!

你的代码几乎没有问题!首先,在你的$ .each中,你试图访问myChart的labels属性。但是你没有定义myChart变量是什么。所以你将得到一个未定义的错误!

Another thing to think about is, your ajax call is asynchronous. It may take a long time to get the data. So whenever you get the data, you need to execute the code to render the chart with that data. I suggest you move that code to a method and call that method in your ajax call's success/done event.

另一件需要考虑的事情是,你的ajax调用是异步的。获取数据可能需要很长时间。因此,无论何时获取数据,都需要执行代码以使用该数据呈现图表。我建议你将该代码移动到一个方法,并在你的ajax调用的success / done事件中调用该方法。

This should work.

这应该工作。

function renderChart(labels, voice) {
    var ctx = document.getElementById("ChartVote");
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Votes', data: voice,
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {   beginAtZero: true  }
                }]
            }
        }
    });
}

Now in your ajax call's done event, you can pass the label array and data array to your RenderChart method.

现在,在您的ajax调用完成事件中,您可以将标签数组和数据数组传递给RenderChart方法。

$(function(){

       $.ajax({
               type: "GET",                  
               url: '@Url.Action("GetVotings","Chart")',
              }).done(function (votings) {
                var labelsArray = [];
                var dataArray = [];
                  $.each(votings, function (index, data) {
                      labelsArray.push(data.Name);
                      dataArray.push(data.Voice);
                  });
                  renderChart(labelsArray, dataArray);
       });

});

#1