如何从MVC控制器显示Chart.js折线图

如何解决如何从MVC控制器显示Chart.js折线图

我有一个项目，需要根据从Controller加载到视图页面的SQL数据，使用Chart.JS显示line-chart。

我想要一个带有多个数据集的简单折线图。数据集将必须自动更新控制器数据加载。

但是，不幸的是，我尝试将视图中的数据加载到图表中，但是没有运气，仍然得到了不准确的结果。

我想要的是每个Exception reading manifest from file:///C:/Users/...vsto: the manifest may not be valid or the file could not be opened. ************** Exception Text ************** System.Deployment.Application.InvalidDeploymentException: Exception reading manifest from file:///C:/Users/...vsto: the manifest may not be valid or the file could not be opened. ---> System.Deployment.Application.InvalidDeploymentException: Manifest XML signature is not valid. ---> System.Security.Cryptography.CryptographicException: SignatureDescription could not be created for the signature algorithm supplied. at System.Security.Cryptography.Xml.SignedXml.CheckSignedInfo(AsymmetricAlgorithm key) at System.Security.Cryptography.Xml.SignedXml.CheckSignatureReturningKey(AsymmetricAlgorithm& signingKey) at System.Deployment.Internal.CodeSigning.SignedCmiManifest.Verify(CmiManifestVerifyFlags verifyFlags) at System.Deployment.Application.Manifest.AssemblyManifest.ValidateSignature(Stream s) --- End of inner exception stack trace --- at System.Deployment.Application.Manifest.AssemblyManifest.ValidateSignature(Stream s) at System.Deployment.Application.ManifestReader.FromDocument(String localPath,ManifestType manifestType,Uri sourceUri) --- End of inner exception stack trace --- at Microsoft.VisualStudio.Tools.Applications.Deployment.ClickOnceAddInDeploymentManager.GetManifests(TimeSpan timeout) at Microsoft.VisualStudio.Tools.Applications.Deployment.ClickOnceAddInDeploymentManager.InstallAddIn() 应该有自己的行和数据。但在我目前的结果中，仅显示一行。而且我不知道该怎么做。

TagsN; @Html.Raw(TagsC); @Html.Raw(TagsN)结果显示在Excell电子表格上。

首先，我将控制器数据转换为@Html.Raw(TagsD)以获取JSON格式并将其解析为图表标签和数据。

结果可能与下图不同，但是我只想看看有什么用。

Running Demo Here

---

这些是测试数据

当前代码： DisplayPage.cshtml

Newtownsoft.Json.JsonConvert.SerializeObject()

JavaScript

var TagsC = Newtonsoft.Json.JsonConvert.SerializeObject(Model._CountedList.Select(x => x.Counted).ToList());
var TagsN = Newtonsoft.Json.JsonConvert.SerializeObject(Model._NameList.Select(x => x.Tag_name).ToList());
var TagsD = Newtonsoft.Json.JsonConvert.SerializeObject(Model._DateList.Select(x => x.Tag_date).ToList());

SQL数据外观：（自动变量）

我想要这样的结果：

我们将不胜感激大家的帮助。

解决方法

data.datasets接受一个数组，因此数组中的每个项目都会向图表添加另一条线。

以下是将数据库中的数据“转换”为图表格式的步骤：

• 使用SerializeObject将表序列化为JSON。看起来应该像

[
  { TagsC: 1,TagsN: "Escalation",TagsD: "06 Oct" },{ TagsC: 7,TagsN: "Switchboard In",]

• 按记录的TagsN属性对记录进行分组（您也可以在大型数据集中建议的database itself中执行此操作）。 Map可以以干净的方式帮助您完成操作，因此结果是一个Map-键是TagsN，值是具有此TagsN的项目的列表。 li>

[[Entries]]
0: {"Escalation" => Array(1)}
1: {"Switchboard In" => Array(7)}
2: {"Account Manager" => Array(5)}
...

• 将其转换为chartjs datasets格式。

0: {label: "Escalation",data: Array(1)}
1: {label: "Switchboard In",data: Array(7)}
2: data: (5) [1,1,1]
   label: "Account Manager"

工作示例：

// this data should come from the server
const colors = ['red','blue','green','yellow'];
const grouped = groupBy(data,'TagsN');
const lineData = {
  datasets: Array.from(grouped).map(([key,items],index) => ({
    label: key,data: items.map(item => item.TagsC),backgroundColor: colors[index]
  })),labels: Array.from(new Set([...TagsDs]))
};

new Chart(document.getElementById("line-chart").getContext('2d'),{
  type: 'line',data: lineData,fill: false
});

function groupBy(arr,key) {
  return arr.reduce((prev,current) => {
    const groupKey = current[key];
    if (!prev.has(groupKey)) {
      prev.set(groupKey,[]);
    }
    prev.get(groupKey).push(current);
    return prev;
  },new Map());
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="line-chart" width="800" height="250"></canvas>

<script>
const TagsDs = ["06 Oct","06 Oct","07 Oct","08 Oct","09 Oct","12 Oct","13 Oct","14 Oct","14 Oct"];
const data = [
  { TagsC: 1,{ TagsC: 3,TagsD: "07 Oct" },{ TagsC: 1,TagsN: "Account Manager",TagsD: "08 Oct" },{ TagsC: 10,{ TagsC: 4,TagsD: "09 Oct" },TagsD: "12 Oct" },{ TagsC: 6,TagsD: "13 Oct" },TagsD: "14 Oct" },];
</script>

https://jsfiddle.net/moshfeu/t3o0bvz2/38/