asp.net - CharJs 使用 Razor
问题描述
我的网络应用程序是关于管理问题和答案的在线投票,我也可以对答案进行投票,所以现在我只需要在图形上显示每个答案的投票数,我看到了这个Chart.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;
}
我已经设法让它显示正确数量的条,但它们没有值或答案文本
解决方案
我建议阅读有关如何提问的堆栈溢出帮助部分,如果您想在如何提问中获得更多回复
<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 数组中执行循环
推荐阅读
- python - 需要帮助从 pandas 数据框中过滤前 3 个计数
- architecture - 自定义 x86_64 包到 armhfp
- javascript - 在 vuejs 中显示降价文件(通过后端链接提供降价)
- python - Python selenium 多线程循环
- excel - 使用 ARRAY 函数返回基于新月份的数值。当 false 希望值来自基于日期的另一列数字时
- python - 如何通过多个发布请求正确启动我的蜘蛛以从其响应中抓取内容?
- html - 如何通过引导程序在项目显示弹性盒设计下删除多余的空间
- android - 关闭应用程序时是否可以接收广播
- javascript - 如何使用代码镜像中的数据对象更改值
- postgresql - TypeORM 命名连接抛出“未找到连接默认值”