c# - 从数据库值动态创建 Chart.JS
问题描述
我正在使用 jQuery-Plugin Chart.JS 为我的网站创建漂亮的图表和图形 - 如果我使用静态值,它会很好地工作。现在我正在尝试从存储在数据库表中的值动态创建图表。我读了很多关于如何做到这一点(ajax-call 等),但我不能只是找出我的错在哪里。
这是我的图表脚本和 ajax 方法:
$(document).ready(function () {
$.ajax({
type: "POST",
url: "/ChartData.asmx/GetChartData",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
// Defining chart.js-function to realize a woundchart with the size of the wound
function OnSuccess_(response) {
var aData = response.d;
var array = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.value = val.value;
array.push(obj);
});
var woundchart = document.getElementById('chartForWound');
var chart = woundchart.getContext('2d');
var colorFade = chart.createLinearGradient(0, 0, 0, 500); // creating linear gradient with: (x0, y0, x1, y1)
// adding colorstops between 0 and 1 in the linear gradient
colorFade.addColorStop(0, "#FF0000");
colorFade.addColorStop(0.5, "#FFFF33");
colorFade.addColorStop(1, "#00FF33");
new Chart(chart, {
type: 'line', // defining type of the chart as linechart
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], // Labels for x-Axis
datasets: [{
label: "Wundgröße in mm",
fill: false,
pointRadius: 5,
pointHoverRadius: 7,
borderColor: colorFade,
pointBorderColor: colorFade,
pointBackgroundColor: colorFade,
pointHoverBackgroundColor: colorFade,
pointHoverBorderColor: colorFade,
data: array, // TODO: entering values from database (y-values)
}]
},
// Defining further options to style the graph
options: {
responsive: true,
animation: {
duration: 4000, // time while animation is active (4000ms)
easing: 'easeInQuart' // style of the animation
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Zeit / Tage' // label for x-Axis
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Wundgröße / mm' // label for y-Axis
}
}]
}
}
});
}
});
这是我在 .asmx-File 中从数据库中的列中获取值的方法:
[WebMethod]
public List<ChartData> GetChartData(List<string> chartdata){
List<ChartData> woundData = new List<ChartData>();
ConnectionStringSettings connectionString = ConfigurationManager.ConnectionStrings["pflegedokumentationConnectionString"];
SqlConnection conn = new SqlConnection(connectionString.ConnectionString);
SqlCommand query = new SqlCommand("SELECT measurement_results FROM epadoc_mod_wound_chart_results", conn);
conn.Open();
SqlDataReader dr = query.ExecuteReader();
if (dr.HasRows)
{
while (dr.Read())
{
ChartData data = new ChartData();
data.value = Convert.ToInt32(dr["measurement_results"].ToString());
woundData.Add(data);
}
}
return woundData;
}
运行代码时我没有收到任何错误,只是没有创建图表。
解决方案
推荐阅读
- php - wordpress is_front_page() true on woocomerce 确认电子邮件
- jquery - 如何使用 jquery 获取行中的前两个 td
- c++ - 在遗传算法中为多个“推销员”TSP 实现交叉函数
- r - 有停止条件的随机游走
- javascript - 有没有一种方法可以通过 JavaScript 中的数据属性来实现?
- javascript - (JavaScript) 语法规则
- matlab - 如何求解已经给定状态向量的耦合非线性 ODES 系统
- firebase - 遵循树的 Firestore 规则的最佳方法
- python - 如何通过 Dict 或 Json 文档消除 Class 构造函数中的额外字段
- python - 如何从python中的本机代码中捕获运行时错误?