Google Chart和Chart.Js，在Asp .NET Core 2.2中将脚本端发送C＃变量
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Google Chart和Chart.Js，在Asp .NET Core 2.2中将脚本端发送C＃变量相关的知识，希望对你有一定的参考价值。
我正在ASP .Net Core 2.2开发Web应用程序。因为.Net Core的新功能，我不得不停下来处理一个问题。
ASP在.Net Core中，我在后端有两个int数组。
我想通过曲线和条形图等各种图形来显示它们，但我无法在脚本结构中对它们进行评估，而我可以使用我从类中通过@model获取的变量。
//My Arrays I want to use each integers.
//x axis
int[] x_ekseni_olculen_yillar = { 1997, 2003, 2005, 2009, 2014, 2018, 2019 };
//y axis
int[] y_ekseni_ofke_katsayisi = { 1, 3, 5, 3, 1, 18, 9 };
正如您在上面说明的两个代码块中所看到的，数据被输入到代码块中。此时，我想通过一组数据操作数据，而不是手动输入数据。如何将下面的int数组传递给这些代码块？这些int数组的元素将作为计算的结果获得，如何从两种Chart类型的数组中提取曲线？
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>
</body>`enter code here`
</html>
答案
您可以在js中使用@Html.Raw(Json.Serialize(Model))来序列化您的模型并获取所有数据。然后将数据组织成您想要的格式。
1.假设您有型号：
public class ChartData
{
public int[] Data_Axis_X { get; set; }
public int[] Data_Axis_Y { get; set; }
}
你的行动：
public IActionResult MyChart()
{
var model = new ChartData
{
Data_Axis_X = new int[] { 1997, 2003, 2005, 2009, 2014, 2018, 2019 },
Data_Axis_Y = new int[] { 1, 3, 5, 3, 1, 18, 9 }
};
return View(model);
}
3.MyChart.cshtml（记得在项目中添加对jquery的引用）
@model ChartData
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js">
</script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var model = @Html.Raw(Json.Serialize(Model));
var allData = [];
allData.push(['Year', 'Sales']);
$.each(model.data_Axis_X, function (index, item) {
var array = [];
array.push(item);
array.push(model.data_Axis_Y[index]);
allData.push(array);
console.log(Alldata);
});
var data = google.visualization.arrayToDataTable(allData);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
结果：
以上是关于Google Chart和Chart.Js，在Asp .NET Core 2.2中将脚本端发送C＃变量的主要内容，如果未能解决你的问题，请参考以下文章