Javascript 隔离或分离这些值，并根据它们制作饼图

我从后端数据库服务器获取了一些数据，返回了以下详细信息

[{ "Year": 2014, "Name": "A", "Values": 18 },{ "Year": 2014, "Name": "B", "Values": 16 },{ "Year": 2015, "Name": "D", "Values": 20},{ "Year": 2015, "Name": "C", "Values": 0 },{ "Year": 2015, "Name": "A", "Values": 0 },{ "Year": 2016, "Name": "D", "Values": 19 }]

---

但我想要的是，首先在每个单独的数组或数组列表中根据年份对数组进行划分/分组，然后将它们用于饼图。有人能在这里帮助我吗。

如果您使用的是谷歌图表，请参阅下面的代码段（它会导致跨源错误，但这是因为谷歌加载器的缘故，它应该仍然可以工作，只需扩展代码段），或者至少将其用作其他饼图实现的示例：

load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
var dbData=[{
“年份”：2014年，
“姓名”：“A”，
“价值观”：18
}, {
“年份”：2014年，
“名称”：“B”，
“价值观”：16
}, {
“年份”：2015年，
“名称”：“D”，
“价值”：20
}, {
“年份”：2015年，
“姓名”：“C”，
“值”：0
}, {
“年份”：2015年，
“姓名”：“A”，
“值”：0
}, {
“年份”：2016年，
“名称”：“D”，
“价值观”：19
}];
var yearFieldName=“年”；
var nameFieldName=“Name”；
var valuesFieldName=“Values”；
函数createPieChartData（数据、keyTitle、valueTitle）{
var yearGroups={}；
var结果=[]；
结果。推送（[keyTitle，valueTitle]）；
var年=空；
//按年份分组的每年记录的总和（）
对于（var i=data.length-1；i>=0；i--）{
年份=数据[i][yearFieldName]；
如果（年份类型==“数字”|年份类型==“字符串”）{
if（年份组类型[年份]=“未定义”）{
年份组[年份+“”]=0；
}
年份组[年份]+=数据[i][valuesFieldName]；
}否则{
//在这里做任何事情，例如：
//抛出新错误（“从DB传递的'Year'字段的某些错误数据类型”）；
}
}
对于（年度组中的变量y）{
结果：push（[y，yearGroups[y]]）；
}
返回结果；
}
函数绘图图（）{
var data=google.visualization.arrayToDataTable（createPieChartData（dbData，“年”，“值之和”）；
变量选项={
标题：“每年的价值：”
};
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}

这是解决方案。首先，您需要创建一个没有重复项的

years

数组。然后，您需要为

n

年中的每一年创建数据数组。此外，它还应该创建

n

div来绘制图表

var json=[{“年”：2014，“名称”：“A”，“值”：18}，{“年”：2014，“名称”：“B”，“值”：16}，{“年”：2015，“名称”：“D”，“值”：20}，{“年”：2015，“名称”：“C”，“值”：0}，{“年”：2015，“名称”：“A”，“值”：0}，{“年”：2016，“名称”：“D”，“值”：19}；
风险值年数=[]；
forEach（函数（obj）{
如果（年份索引of（目标年份）=-1）
年推进（目标年）；
});
对于（i=0；i请发布您对这些组的看法。Alexandru-lonut，这些组应基于年份，就像2014年的所有名称和值一样，作为饼图的一个实体，饼图应显示2014年的所有名称和值，其他年份也是如此，这意味着应根据不同的y动态创建10个饼图耳（10个）。我发布了一个解决方案。这不是我想要的，我想为每年设计/创建一个饼图，这意味着每年都将作为一个饼图组，然后应该有一个饼图。比如2014年应该有一个饼图，2015年应该有一个饼图，依此类推……数据将从数据库se动态获取服务器和图表应该使用类似for循环的东西动态创建。请使用angularjs或javascript创建此解决方案，因为我的项目中没有使用jQuery。您的解决方案似乎很棒，但让我再告诉您一件事，我已经有了一个图表（不同的）我想在exist的下面显示你上面的图表，但是它没有出现，在html中没有直接可用的div元素。那么你能告诉我怎么把它放在那里吗？我使用的是angularjs！@Saleem，现在请看文章的结尾。Alexandru，我看到的是空白的。在html中，我只在页面检查器中看到这个。下面在我的文件中是html代码。是的。这将创建绘制图表的3个div。这是您想要的吗？