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

Question

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

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

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

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

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

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

结果可能与下图不一样，但我只是想看看有什么效果。

Running Demo Here

---

这些是测试数据

当前代码： 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());

Javascript

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 数据外观：（自动变化）

我想要这样的结果：

我们将非常感谢大家的帮助。

Answer 1

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

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

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

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

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

[[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, 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","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/