javascript - C# asp.net mvc 中 Chart.js 的行不起作用
问题描述
我在使用 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,
theme: "light2",//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
动作修改为 returnJsonResult
。不是ContentResult
。 - 你
Alertas/Json
应该接受一个Id
参数,所以我在$.get("/alertas/json/1");
- 我假设一些简单的数据库数据来显示这个图表会起作用。
- 分配
axisX
的属性,包括时间格式/间隔 - Assing
dataPoints
withx
和y
as 键,而不是你的tempo
和valor
as 键。
我的版本有效:
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,
nomeAl = "1"
},
new Conteudos()
{
Data_cont = DateTime.Now.AddHours(2),
max_valor = 30,
nomeAl = "1"
},
new Conteudos()
{
Data_cont = DateTime.Now.AddHours(3),
max_valor = 50,
nomeAl = "1"
},
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);
}
推荐阅读
- javascript - Angular 8在cookie中保存数组
- reactjs - React-Redux 的 mapStateToProps 以意想不到的方式工作
- angular - 当更改显示的数据量时执行几个连续的相同查询?
- c# - 如何修复“没有为 POST / 找到交互”(和 GET /)?
- reactjs - sh: 1: tailwind: 运行 npm start 时未找到
- elasticsearch - 弹性,我可以使用我自己的全局序数和一个无痛的术语聚合脚本吗?
- asp.net-core - 通过 AJAX 发送表单并通过 fluentValidation 进行验证
- java - 如何在调试过程中了解哪个线程正在创建新变量?
- c# - 调度程序计时器滴答事件无法正常工作
- visual-studio - 使用 Visual Studio 2019 C++ 打开文件夹中所有 jpg 或 png 类型的图像文件