ChartJS 如何将单个json数组分离成x和y值？

wixjitnu 于 2022-11-23 发布在 Chart.js

关注(0)|答案(1)|浏览(157)

我使用Json.SerializeObject（变量）来获取一个数组，我使用Chart.js绘制了该数组。为了获取该数组，我创建了一个列表，并将键及其对应的值添加到MVC中的Model内的函数的foreach循环内的列表中，如下所示：

var CountryList = new List<int>();
foreach (var country in CountryData.ToList().GroupBy(...))
{
   foreach(var countryNum in country.GroupBy(...)
   {
        CountryList.Add(countryNum.key);
        CountryList.Add(countryNum...);
   }
}
return Json.SerializeObject(CountryList);

我能够得到数组，它看起来像这样：

[0,34,1,56,2,93,0,33,1,88,2,56,1,68]

0，1，2，0，1，2，1是我的x值，它们是我在循环中添加的键，因此它们应该出现在X轴上，而34，56，93，33，88，56，68是我的y值。我还需要将它们分成3个不同的图形，如下所示：[0，34，1，56，2，93] & [0，33，1，88，2，56] & [0，0，1，68，2，0]。如何将该数组分开，以便绘制相应的图形？我使用的是chart.js的条形图。
注意：如果你想知道我为什么这样做，我需要创建多个图形，我不想每个图形都有一个函数。这样会导致我有超过20个函数。如果你有其他推荐的方法，请告诉我。
我正在获取的值来自数据库。
这是我的预期输出：1 2 3

chart.js

来源：https://stackoverflow.com/questions/72691255/how-to-separate-a-single-json-array-into-x-and-y-values

1条答案

按热度按时间

ss2ws0br1#

如果我可以假设属性0，1，2连接到一个国家。所以每个图= 1个国家。我还假设你使用C#，因为代码似乎使用Linq。

Dictionary<string, Graph> dict = new Dictionary<string, Graph>();
foreach (var country in CountryData.ToList().GroupBy(...))
{
  Graph g = new Graph();
  foreach(var countryNum in country.GroupBy(...)
  {
      g.addEntry(countryNum.key,countryNum...);
  } 
  dict.add("someName", g); // add different name for different graphs to avoid overriding values
}
return Json.SerializeObject(dict);

Graph类本身

class Graph {
   List<int> labels = new List<int>();
   List<int> values = new List<int>();

   public void addEntry(int label, int value){
       labels.Add(label);
       labels.Add(value);
   }
}

如果我的假设是正确的，那么这应该可以达到目的。如果我的假设是错误的，那么我希望这可以帮助你朝着正确的方向前进。
额外的好处是，您可以修改Graph类，使其更通用于graph.js。例如添加颜色信息等。因此，在JS部分，您只需使用一个方法makeGraph，它将此JSON作为输入，然后基于其中的值为您构造一个图。

赞(0）回复(0）举报 2022-11-23

我来回答

ChartJS 如何将单个json数组分离成x和y值？

1条答案

相关问题

热门标签

最新问答