我試圖在使用生產資料之前用測驗資料填充圖表，但我無法將資料放入圖表中。我沒有發現任何錯誤，并且控制器正在回傳 2 個完整的資料集return Json(_chart);。圖表顯示，但圖表中沒有資料。我在這里做錯了什么？
索引.cshtml
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script type="text/javascript">
jQuery.extend({
getValues: function (url) {
var result = null;
$.ajax({
url: url,
type: 'get',
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: false,
sucess: function (data) {
result = data;
}
});
return result;
}
});
</script>
</head>
<body>
<canvas id="myLineChart" width="400" height="200"></canvas>
<script type="text/javascript">
var ctx = document.getElementById("myLineChart").getContext('2d');
var tData = $.getValues("/Home/MultiLineChartDataEF");
var myLineChart = new Chart(ctx, {
type: 'line',
data: tData
});
</script>
</body>
家庭控制器.cs
public JsonResult MultiLineChartDataEF()
{
var chartData = _context.ChartTests.ToList();
var uniqueProducts = from d in chartData orderby d.ProductName group d by d.ProductName into m select m.Key;
var uniqueMonths = from a in chartData orderby a.MonthNumber group a by a.Month into g select g.Key;
string[] cols = new string[] { "#FF0000", "#000000" };
int i = 0;
Chart _chart = new();
_chart.labels = uniqueMonths.ToArray();
_chart.datasets = new List<Datasets>();
List<Datasets> _dataSet = new();
foreach(var d in uniqueProducts)
{
var colors = new string[uniqueProducts.Count()];
for (int j = 0; j < colors.Length; j ) colors[j] = cols[i];
_dataSet.Add(new Datasets()
{
label = d,
data = (from a in chartData where a.ProductName == d select a.Amount).ToArray(),
backgroundColor = new string[] { cols[i] },
borderColor = new string[] { cols[i] },
borderWidth = "1"
});
i ;
}
_chart.datasets = _dataSet;
return Json(_chart);
}
圖表.cs
using System.Collections.Generic;
namespace ChartTest.Models
{
public class Chart
{
public string[] labels { get; set; }
public List<Datasets> datasets { get; set; }
}
public class Datasets
{
public string label { get; set; }
public string[] backgroundColor { get; set; }
public string[] borderColor { get; set; }
public string borderWidth { get; set; }
public string[] data { get; set; }
}
}
ChartTest.cs
namespace ChartTest.Models
{
public partial class ChartTest
{
public string ProductName { get; set; }
public string Month { get; set; }
public string Amount { get; set; }
public int? MonthNumber { get; set; }
}
}
uj5u.com熱心網友回復：
我認為這只是你的ajax拼寫錯誤，ajax呼叫的成功應該是“success”，而不是“success”，我改正后，可以正常取資料了。
jQuery.extend({
getValues: function (url) {
var result = null;
debugger;
$.ajax({
url: url,
type: 'get',
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: false,
success: function (data) {
result=data;
},
error:function(){
return error;
}
});
return result;
}
});
測驗結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/471020.html
標籤：javascript C＃ 实体框架 asp.net 核心 图表.js