CharJs используя бритву - PullRequest
Новая
       6

CharJs используя бритву

0 голосов
/ 21 мая 2018

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

<html>
<head>
<script 
 src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"> 
</script>
     </head>
   <body>
   <div id="chart_container">
       <canvas id="myChart" width="400" height="400"></canvas>
        <script>
              var ctx = document.getElementById("myChart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar', data: {
                        labels: @Html.Raw(ViewBag.DataPoints)

                            datasets: [{
                                label: 'Numero de respostas',
                                data: @Html.Raw(ViewBag.DataPoints)

                                borderWidth: 1,
                            }]
                    },
                options: {scales: {yAxes: [{ticks: {beginAtZero: true}}]}}});
    </script>
</div>

Вот мой код контроллера: 

 List<DataPoint> dataPoints = new List<DataPoint>();
            foreach (var resposta in poolDbContext.Answers)
            {
                dataPoints.Add(new DataPoint(resposta.Text, answer.Votes.Count()));
            }
            ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);

            ViewBag.Data = question.Answers;
            ViewBag.ObjectName = question.Text;

А вот моя модель DataPoint: 

  [DataContract]
public class DataPoint
{
    public DataPoint(string labels, double data)
    {
        this.Label = labels;
        this.Y = data;
    }

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "labels")]
    public string Label = "";

    //Explicitly setting the name to be used while serializing to JSON.
    [DataMember(Name = "data")]
    public Nullable<double> Y = null;
}

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

EmptyBars Изображение

1 Ответ

0 голосов
/ 21 мая 2018

Я бы посоветовал прочитать раздел справки по переполнению стека о том, как задавать вопросы, если вы хотите получить больше ответов на Как задавать вопросы 

     <html>
        <head>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
        </head>
        <body>
            <div id="chart_container">
                <canvas id="myChart" width="400" height="400"></canvas>
            </div>

               <script>
                var arrayOfAnswers = JSON.parse('@Html.Raw(Json.Encode(Model.Answers.ToList()))');
                var ctx = document.getElementById("myChart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: arrayOfAnswers,
                        datasets: [{
                            label: '# of Answers',
                            data: [//Enter data for all answers labels, corresponding to bars],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
                </script>
        </body>
        </html>

Это должно работать, и вы также можете 'сделать foreach цикл внутри массива JavaScript

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...