Asp.net mvc MVC应用程序中的Chart.js

我有一个带有CHart.js的MVC应用程序。 我可以在View load事件中加载CHart.js

我希望将Chart.js加载到html按钮单击事件中。 单击按钮时，将调用控制器，并根据搜索条件筛选数据。 我希望此过滤内容显示在chart.js上

在单击按钮完成控制器进程后，如何调用javascript函数在单击按钮时加载图表

流量应该是 1.输入过滤条件 2.点击按钮 3.控制器根据过滤器从数据库获取数据 4.然后调用视图中的javascript函数来加载chart.js

---

让我知道如何操作。

要以JavaScript显示从控制器返回的数据，您有两个选项：

第一个：
在视图中使用razor语法引用控制器返回的模型。这意味着您的JavaScript也将写入视图中

@model“yourViewModel”
//查看html代码
document.getElementById（“按钮”）。单击（函数（）{
var chartData=@Html.Raw（Json.Serialize（Model.nameOfYourModel'）；
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myLineChart=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：选项
});

第二个：
通过AJAX从控制器检索数据，为此我建议使用jQuery库，因为它使语法更易于编写和理解

var图表数据；
$（'.button'）。单击（函数（）{//按钮
$.ajax（{//Invoke controller action以检索数据
url:“控制器及其操作的路径”，
键入：“GET”，
成功：功能（数据）{
图表数据=数据；
}
});
var ctx=$（“myChart”）.getContext（'2d'）；
var myLineChart=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：选项
});
}

---

使用这种方法，您可以调用控制器操作，以JSON格式返回图表数据。

要以JavaScript显示从控制器返回的数据，您有两个选项：

第一个：
在视图中使用razor语法引用控制器返回的模型。这意味着JavaScript也将写入视图中

@model“yourViewModel”
//查看html代码
document.getElementById（“按钮”）。单击（函数（）{
var chartData=@Html.Raw（Json.Serialize（Model.nameOfYourModel'）；
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myLineChart=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：选项
});

第二个：
通过AJAX从控制器检索数据，为此我建议使用jQuery库，因为它使语法更易于编写和理解

var图表数据；
$（'.button'）。单击（函数（）{//按钮
$.ajax（{//Invoke controller action以检索数据
url:“控制器及其操作的路径”，
键入：“GET”，
成功：功能（数据）{
图表数据=数据；
}
});
var ctx=$（“myChart”）.getContext（'2d'）；
var myLineChart=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：选项
});
}

---

使用这种方法，您可以调用控制器操作，以JSON格式返回图表数据。

MVC与chart.js无关，chart.js是一个Javascript插件，MVC是一个架构模式。请更改标题和标签。MVC与chart.js无关，chart.js是一个Javascript插件，MVC是一个架构模式。请更改标题和标记。我尝试了选项2。问题是，在执行java脚本后，只调用服务器端控制器代码。因此图表数据将不可用。我不太理解您的评论。但我想您的意思是，您的页面在调用控制器后会刷新？这会导致您的数据丢失图表？如果是这种情况，您应该只从控制器返回状态Ok以及图表所需的数据。例如：

返回Ok（您的模型）；

或

返回Ok（数据=您的集合）

我尝试了选项2。问题是在执行java脚本后，只调用服务器端控制器代码。因此图表数据将不可用。我不太理解您的评论。但我想您的意思是，您的页面在调用控制器后会刷新？这会导致图表丢失？如果是这样的话在这种情况下，您应该只从控制器返回状态Ok，以及图表所需的数据。例如：

返回Ok（您的模型）；

或

返回Ok（数据=您的集合）；