Нужна помощь Chart.js в asp.net mvc

Question

Через несколько дней вы можете составить график, нам нужно ваше руководство.

Стрелка отображает объекты, но на диаграмме ничего не отображается. Поиск не был успешным.

Мои модели:

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; } 
} 

Мой контроллер:

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


     return Json(votings, JsonRequestBehavior.AllowGet); 
    } 

Вероятно, главная проблема в сценарии вызывающему данные сделали. Хотя возможно, что контроллер неправильно настроен для вывода данных, будет очень рад вашей помощи.

Мой Вид:

<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> 

Answer 1

Ваш код имеет несколько проблем! Прежде всего, внутри вашего $.each вы пытаетесь получить доступ к labels собственности myChart. Но вы не определили переменную myChart. Таким образом, вы получите неопределенную ошибку!

Еще одна вещь, о которой стоит подумать, - ваш аякс-вызов является асинхронным. Это может занять много времени, чтобы получить данные. Поэтому всякий раз, когда вы получаете данные, вам нужно выполнить код для рендеринга диаграммы с этими данными. Я предлагаю вам переместить этот код в метод и вызвать этот метод в событии успеха/выполнения вашего ajax-вызова.

Это должно сработать.

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 } 
       }] 
      } 
     } 
    }); 
} 

Теперь в случае вашего проделанном АЯКСА вызова, вы можете передать массив этикетки и массив данных для вашего метода 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); 
     }); 

});