[英]Chart.js chart by passing data through the controller MVC
我试图通过将来自控制器的数据传递给它来显示图表。 我正在使用chart.js
模型:
public class DatapointLine
{
public DatapointLine(double x, double y)
{
this.X = x;
this.Y = y;
}
// setting the name to be used when serializing to JSON.
[DataMember(Name = "x")]
public Nullable<double> X = null;
//setting the name to be used whenserializing to JSON.
[DataMember(Name = "y")]
public Nullable<double> Y = null;
}
控制器:
public JsonResult BarChart()
{
List<DatapointLine> dataPoints = new List<DatapointLine>{
new DatapointLine(10, 22),
new DatapointLine(20, 36),
new DatapointLine(30, 42),
new DatapointLine(40, 51),
new DatapointLine(50, 46),
};
ViewBag.DataPoints = JsonConvert.SerializeObject(dataPoints);
return Json(dataPoints, JsonRequestBehavior.AllowGet);
}
脚本:
<script type="text/javascript">
$(function() {
var data = getData();
AutoFollow(data);
});
function getData() {
var dateValue = [];
var countValue = [];
$.ajax({
url: "/Supernethome/BarChart",
dataType: 'json',
async: false
}).done(function(data) {
data.forEach(function(data) {
dateValue.push(data.X);
countValue.push(data.Y);
});
});
return {
dateValue: dateValue,
countValue: countValue
};
}
$(document).ready(function () {function AutoFollow(data) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx,
{
type: 'bar',
data: {
labels: data.dateValue,
datasets: [
{
label: 'AutoFollow',
data: data.countValue,
backgroundColor: "rgba(153,255,51,1)"
}, {
label: 'Manual',
data: [30, 29, 5, 5, 20, 3, 10],
backgroundColor: "rgba(255,153,0,1)"
}
]
}
});
}
});
我在局部视图中生成图表的视图,然后在主视图中引用局部视图。
我收到以下错误:
chartjs.init.js:3 Uncaught TypeError: Cannot read property 'getContext' of null at HTMLDocument.<anonymous> (chartjs.init.js:3) at f (jquery.js:1026) at Object.fireWith [as resolveWith] (jquery.js:1138) at Function.ready (jquery.js:427) at HTMLDocument.xt (jquery.js:97)
错误正在浪费大量时间,需要帮助。
对我来说似乎是两个不同的错误...
错误1:找不到图容器
签出此线程,因为问题听起来是一样的:
错误2:无法读取属性“ getContext”
这看起来像一条红鲱鱼。 morris.js不会抛出此异常,而chartjs会抛出此异常。 但是,此代码引发的异常可能会阻止morris.js代码成功执行。 因此,值得单独测试代码,即加载一个视图,除了所需的morris脚本/资产和内联脚本外,不加载任何视图。 没有其他脚本或JavaScript库。 像这样的东西:
示例测试视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
</head>
<body>
<div id="mychart"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script>
$(document).ready(function () {
$.getJSON("/Supernethome/BarChart", function (data) {
new Morris.Area({
element: 'mychart',
data: data,
xkey: 'X',
ykeys: ['Y'],
pointSize: 2,
hideHover: 'auto',
resize: true
});
});
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.