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

debugcn 发表于 Dev

帕特森·利纳

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

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

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

我要的是每个人都TagsN应该有自己的行和数据。但在我目前的结果中，仅显示一行。而且我不知道该怎么做。

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

首先，我将控制器数据转换为Newtownsoft.Json.JsonConvert.SerializeObject()以获得JSON格式，然后将其解析为图表标签和数据。

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

在此处运行演示

这些是测试数据

当前代码： DisplayPage.cshtml

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());

Java脚本

new Chart(document.getElementById("line-chart"), {
  type: 'line',
  data: {
    labels: ["06 Oct", "06 Oct", "07 Oct", "08 Oct", "08 Oct", "09 Oct", "12 Oct", "12 Oct", "12 Oct", "13 Oct", "13 Oct", "14 Oct"], // DateTime
    datasets: [{
      data: @Html.Raw(TagsC),
      label: @Html.Raw(TagsN),
      borderColor: "#3e95cd",
      fill: false
    }]
  }
});

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

我想要这样的结果：

非常感谢大家的帮助。

莫什·费

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

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

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

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

按记录的TagsN属性对记录进行分组（您也可以在大型数据集中建议的数据库本身中执行此操作）。Map可以帮助您以一种干净的方式进行操作，因此结果是Map-键是TagsNs，值是具有此功能的项目的列表TagsN。

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

将此转换为chartjsdatasets格式。

0: {label: "Escalation", data: Array(1)}
1: {label: "Switchboard In", data: Array(7)}
2: data: (5) [1, 1, 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/[email protected]"></script>
<canvas id="line-chart" width="800" height="250"></canvas>

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。