代码之家 › 专栏 › 技术社区 › Dorin Munreanu

使用剃刀的字符

razor asp.net-mvc asp.net

Dorin Munreanu · 技术社区 · 6 年前

我的网络应用程序是关于管理问题和答案的在线投票,我也可以对答案投票,所以现在我只需要在图形上显示每个答案的投票数,我看到了这个 图表.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;

下面是我的数据点模型:

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

1 回复 | 直到 6 年前

EmpJemz 6 年前

我建议阅读堆栈溢出帮助部分,了解如何提问,如果您希望在 How to ask questions

     <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数组中循环

推荐文章

Community wiki · 为什么使用DirectoryEntry对LDAP进行身份验证会间歇性地抛出COMException(0x8007203A):“服务器不可操作”?

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

Hua Deng · page_load中的调用方法导致adapter.fill()上出现StackOverflowException,但在其他地方调用时没有问题

1 年前

WingiM · REST API-如何实现具有相同名称但可接受参数类型不同的多个方法

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

NAM3L3SSRJ · 如何在C语言中创建一个方法或函数,在超市销售时减少数据库中的库存

2 年前

Javad A salehi · C#如何解析“MyValue”的动态值

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Geoff · 从Microsoft Identify Platform获取访问令牌

2 年前

Haim Ohayon · 这些链接之间有什么区别?

2 年前