使用具有动态数据的Chart.js加载图表ASP.net MVC Core

我不熟悉ASP.net MVC，它使用引导加载一个包含来自数据库的动态数据的图形。我使用此链接作为开始时的指南和教程

我能够用静态数据加载图形，现在，我想用来自数据库的数据动态填充图形

这是开始的代码

patientService.cs-这将给出患者生命体征的结果集（记录的身高、体重和日期）。每个日期一名患者可能有多个记录的生命体征。这将是图形的标签和数据（高度和日期）

\u partialViewPatient.cshtml-然后将接收绘制图表所需的数据。目前，javascript中的代码是静态代码。我现在不知道如何将VisitVitalSignVM模型中的数据绘制到数据集。

**@using UMP.ClinicalSystem.Models.Models;
@using UMP.ClinicalSystem.Models.Dto;

@model IEnumerable<VisitVitalSignVM>

@{
    Layout = null;
}

   <div id="chartContainer"> </div>



<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">


    var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "Simple Column Chart in ASP.NET MVC"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
            {
                type: "line", //change type to bar, line, area, pie, etc
                dataPoints: [
                { x: 10, y: 71 },
                { x: 20, y: 55 },
                { x: 30, y: 50 },
                { x: 40, y: 65 },
                { x: 50, y: 95 },
                { x: 60, y: 68 },
                { x: 70, y: 28 },
                { x: 80, y: 34 },
                { x: 90, y: 14 }
                ]
            }
            ]
        });
        chart.render();
</script>**

***使用UMP.ClinicalSystem.Models.Models；
@使用UMP.ClinicalSystem.Models.Dto；
@模型IEnumerable
@{
布局=空；
}
var chart=new CanvasJS.chart（“chartContainer”{
主题：“主题2”，
animationEnabled：没错，
标题：{
文本：“ASP.NET MVC中的简单柱状图”
},
字幕：[
{text:“尝试调整浏览器大小”}
],
数据：[
{
类型：“直线”//将类型更改为条形、直线、面积、饼图等
数据点：[
{x:10，y:71}，
{x:20，y:55}，
{x:30，y:50}，
{x:40，y:65}，
{x:50，y:95}，
{x:60，y:68}，
{x:70，y:28}，
{x:80，y:34}，
{x:90，y:14}
]
}
]
});
chart.render（）；
**

您的插件要求数据是包含属性

x

和

y

您需要首先将视图模型集合转换为javascript数组，然后构建一个新的对象数组以传递给

dataPoints

选项

在视图中包括

@inject-ijson以便可以序列化模型，然后在脚本中

// convert your model to a javascript array
var model = @Html.Raw(Json.Serialize(Model));
// initialise a new array
var datapoints = [];
// build an array of objects
$.each(model, function(index, item) { 
    datapoints.push({ x: new Date(item.lastUpdatedDate), y: item.height }); 
});

然后修改插件代码以使用数组

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    ....
    data: [{
        type: "line",
        dataPoints: datapoints // modify this
    }]
});
chart.render();

您的插件要求数据是包含属性
x
和
y

您需要首先将视图模型集合转换为javascript数组，然后构建一个新的对象数组以传递给
dataPoints
选项

在视图中包括
@inject-ijson以便可以序列化模型，然后在脚本中

// convert your model to a javascript array
var model = @Html.Raw(Json.Serialize(Model));
// initialise a new array
var datapoints = [];
// build an array of objects
$.each(model, function(index, item) { 
    datapoints.push({ x: new Date(item.lastUpdatedDate), y: item.height }); 
});

然后修改插件代码以使用数组

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "theme2",
    ....
    data: [{
        type: "line",
        dataPoints: datapoints // modify this
    }]
});
chart.render();

您的意思是希望
dataPoints
值来自数据库吗？是的，根据编码方法，数据已经通过@model IEnumerableYou模型可用，您需要包含一个属性，即
IEnumerable Points
其中
DataPoints
包含属性
double x
和
double y
（或
int
）。然后在脚本中你可以使用
dataPoints:@Html.Raw（Json.Encode（Model.Points））
你能进一步解释一下吗，对不起，我在这里完全是新手。谢谢您的意思是希望
dataPoints
值来自数据库吗？是的，根据编码方法，数据已经通过@model IEnumerableYou模型可用，您需要包含一个属性，即
IEnumerable Points
其中
DataPoints
包含属性
double x
和
double y
（或
int
）。然后在脚本中你可以使用
dataPoints:@Html.Raw（Json.Encode（Model.Points））
你能进一步解释一下吗，对不起，我在这里完全是新手。谢谢