如何解决C＃中的Chart.js中的行在ASP.NET MVC中不起作用
我在使用C＃asp.net mvc时遇到问题。我的图表中的线未显示。我尝试了许多不同的图表，但是没有用。目的是使用我的数据库值来画线。
我的观点：Estatisticas.cshtml
@model Estágio_TP.Models.Alerta
@{
ViewBag.Title = "Estatisticas";
}
<h2>Estatisticas de @Html.DisplayFor(model => model.nomeAlerta)</h2>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title>Doughnut Chart</title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title>Gráfico Chart</title>
<script src="~/Content/js/Chart_est.js"></script>
</head>
<body>
<div id="chartContainer1" style="width: 100%; height: 500px;display: inline-block;"></div>
<br /><br /><br />
<div id="chartContainer2" style="width: 100%; height: 500px;display: inline-block;"></div>
<!--<div class="card-body">
<div class="chart-area">
<canvas id="teste_est"style="width: 100%; height: 500px;display: inline-block;"></canvas>
</div>
</div>-->
<script type="text/javascript">
function chart1(){
var chart1 = new CanvasJS.Chart("chartContainer1",{
title: {
text: " @Html.DisplayFor(model => model.nomeTrigger)"
},animationEnabled: true,legend: {
fontSize: 20,fontFamily: "Helvetica"
},theme: "light2",data: [
{
type: "doughnut",indexLabelFontFamily: "Garamond",indexLabelFontSize: 20,indexLabel: "{label} {y}%",startAngle: -20,showInLegend: true,toolTipContent: "{legendText} {y}%",dataPoints: [
{ y: @ViewData["valor"],legendText: "Em Uso",label: "Em Uso"
},{ y: 100 - @ViewData["valor"],legendText: "Livre",label: "Livre" },],//dataPoints: @Html.Raw(ViewBag.DataPoints),}
]
});
chart1.render();
}
$(document).ready(function () {
showChart3();
});
function showChart3() {
$.get("/alertas/json/",function (data) {
var tempo = [];
var valor = [];
for (var i in data) {
tempo.push(data[i].tempo);
valor.push(data[i].valor);
}
var chart = new CanvasJS.Chart("chartContainer2",{
animationEnabled: true,//light1
title: {
text: "Gráfico ao Longo do Dia"
},data: [
{
// Change type to "bar","splineArea","area","spline","pie",etc.
type: "line",dataPoints: data
}
]
});
chart.render();
});
}
function start() {
chart1();
showChart3();
}
window.onload = start();
</script>
<!-- <script src="~/Content/js/teste_estatistica.js"></script>-->
</body>
</html>
控制器：
public ContentResult JSON(string id)
{
var teste_xx = db.Conteudos.Where(a => a.nomeAl == id)
.Where(a => a.Data_cont.Day == DateTime.Now.Day)
.OrderBy(a => a.Data_cont)
.Select(a => new
{
valor = a.max_valor,tempo = a.Data_cont //.ToString("hh:mm")
});
List<DataPoint> dataPoints;
dataPoints = new List<DataPoint>();
foreach (var result in teste_xx)
{
//list2.Add(result.tempo.ToString());
//list2.Add(result.valor.ToString());
var tempo = result.tempo;
var valor = result.valor;
dataPoints.Add(new DataPoint(tempo,valor));
}
JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };
return Content(JsonConvert.SerializeObject(dataPoints,_jsonSetting),"application/json");
}
}
DB：仅需要DateTime（“ hh：mm：ss”）和max_value
数据库
解决方法
有许多问题需要修改。
- 您两次导入canvasjs.min.js ...只需导入1次。
- 我只解决您的
Alertas/Json行动，没有Alertas/Estatisticas的模型Estágio_TP.Models.Alerta，因此该页面将不会显示chartContainer1的解决方案。 - 我修改了
Json操作以返回JsonResult。不是ContentResult。 - 您的
Alertas/Json应该带有一个Id参数，因此我将参数硬编码在$.get("/alertas/json/1");中
- 我假设一些简单的数据库数据可以显示此图表。
- 分配
axisX的属性，包括时间格式/间隔 - 使用
dataPoints和x作为键而不是您的y和tempo作为键来关联valor。
我的版本有效：
Estatisticas.cshtml
<div id="chartContainer2" style="width: 100%; height: 500px;display: inline-block;"></div>
@section scripts {
<script>
$(document).ready(function () {
showChart3();
});
function showChart3() {
$.get("/alertas/json/1",function (data) {
var dataPoints = [];
for (var i in data) {
dataPoints.push({
x: new Date(parseInt(data[i].tempo.replace("/Date(","").replace(")/",""),10)),y: data[i].valor
});
}
console.log(dataPoints);
var chart = new CanvasJS.Chart("chartContainer2",{
animationEnabled: true,theme: "light2",title: {
text: "Gráfico ao Longo do Dia"
},axisX: {
interval: 10,intervalType: "minute",valueFormatString: "YYYY/MM/DD HH:mm"
},data: [
{
type: "line",dataPoints: dataPoints
}
]
});
chart.render();
});
}
</script>
}
控制器
public JsonResult JSON(string id)
{
var db = new List<Conteudos>()
{
new Conteudos()
{
Data_cont = DateTime.Now,max_valor = 10,nomeAl = "1"
},new Conteudos()
{
Data_cont = DateTime.Now.AddHours(1),max_valor = 40,new Conteudos()
{
Data_cont = DateTime.Now.AddHours(2),max_valor = 30,new Conteudos()
{
Data_cont = DateTime.Now.AddHours(3),max_valor = 50,new Conteudos()
{
Data_cont = DateTime.Now.AddHours(4),max_valor = 60,nomeAl = "1"
}
};
var teste_xx = db.Where(a => a.nomeAl == id)
.Where(a => a.Data_cont.Day == DateTime.Now.Day)
.OrderBy(a => a.Data_cont)
.Select(a => new
{
valor = a.max_valor,tempo = a.Data_cont //.ToString("hh:mm")
});
List<DataPoint> dataPoints;
dataPoints = new List<DataPoint>();
foreach (var result in teste_xx)
{
//list2.Add(result.tempo.ToString());
//list2.Add(result.valor.ToString());
var tempo = result.tempo;
var valor = result.valor;
dataPoints.Add(new DataPoint(tempo,valor));
}
return Json(dataPoints,JsonRequestBehavior.AllowGet);
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
