使用Chart.js从世界银行javascript JSON下载获取统计数据的更改

这是user120242建议的更新脚本和解决方案，用于计算世界银行数据下载中统计数据的变化。我在这里展示了他的工作脚本，其中包括一些调整，允许1绘制数据间隙，2绘制更改值或百分比

第二张图表第一年的变化为零，之后的一切都是今年和去年价值之间的差值

document.addEventListener'DOMContentLoaded'，=>{ //控制台。日志加载 window.countrycode='US'； window.indcode='NY.GDP.PCAP.PP.CD'； 获取数据 } 函数获取数据{ 取回https://api.worldbank.org/v2/country/“+window.countrycode+”/indicator/“+window.indcode+”？格式=json&per_page=120” .thenresp=>resp.json .thendata=>{ 设年份=数据[1]。mapyear=>year.date.reverse 让gdps=data[1]。mapyear=>year.value.reverse 两年前，gdps years2=years.filterx，i=>gdps[i]！==null gdps2=gdps.filterx=>x！==null gdps3=gdps2.mapgdp，i=> gdp类型！='number'| gdps2[i-1]类型！='number'？0: gdp-gdps2[i-1] gdps4=gdps2.mapgdp2，i2=> gdp2的类型！=“编号”| gdps2[i2-1]的类型！=“编号”？0: gdp2-gdps2[i2-1]/gdps2[i2-1]*100 //日志'Years:'，Years，'gdps:'，gdps，'gdps2:'，gdps2'，gdps3:'，gdps3'，gdps4:'，gdps4:' 创建图表2年2，gdps4 } } 功能创建年份，gdps{ 新建Chartdocument.getElementByIdline-chart{ 键入：“行”， 数据：{ 标签：年， 数据集：[{ 数据：GDP， 标签：美国GDP， 填充：假， 背景颜色：“蓝色”， 边框颜色：“蓝色”， pointBorderColor:'蓝色'， 点半径：1， } ] }, 选项：{ 标题：{ 显示：假， 正文：“1969-2019年美国GDP数据”， }, 动画：错， 图例：{display:true}， MaintaintAspectRatio:false， 回答：是的， responsiveAnimationDuration:0， 比例：{ 雅克斯：[{ 滴答声：{ 贝吉纳泽罗：是的， 回调：函数值、索引、值{ ifparseIntvalue>=1000{ 返回“$”+value.toString.replace/\B？=\d{3}+？！\d/g，； }否则{ 返回“$”+值； } } } }] } } }; } 函数createChart2years2，gdps4{ 新建Chartdocument.getElementByIdline-chart2{ 类型：'bar'， 数据：{ 标签：年份2， 数据集：[{ 数据：gdps4， //标签：美国GDP， 填充：假， 背景颜色：“蓝色”， 边框颜色：“蓝色”， pointBorderColor:'蓝色'， 点半径：1， } ] }, 选项：{ 标题：{ 显示：假， 正文：“1969-2019年美国GDP数据”， }, 动画：错， 图例：{display:true}， MaintaintAspectRatio:false， 回答：是的， responsiveAnimationDuration:0， 比例：{ 雅克斯：[{ 滴答声：{ 贝吉纳泽罗：是的， 回调：函数值、索引、值{ 返回值+'%'； } } }] } } }; } 更改js window.code值->

---

只需一个简单的映射，就可以用上一个值减去每个值。 检查以确保值为number，否则将返回0

我添加了空GDP的过滤器，所以这些年不会出现在图表中。注意，如果中间有漏洞，它将只使用上一年可用的。 document.addEventListener'DOMContentLoaded'，=>{ //控制台。日志加载 window.countrycode='US'； window.indcode='NY.GDP.PCAP.PP.CD'； 获取数据 } 函数获取数据{ 取回https://api.worldbank.org/v2/country/“+window.countrycode+”/indicator/“+window.indcode+”？格式=json&per_page=120” .thenresp=>resp.json .thendata=>{ 设年份=数据[1]。mapyear=>year.date.reverse 让gdps=data[1]。mapyear=>year.value.reverse 年=年。filterx，i=>gdps[i]！==null gdps=gdps.filterx=>x！==null 两年前，gdps gdps=gdps.mapgdp，i=> gdp类型！='number'| gdp类型[i-1]！='number'？0: 国内生产总值国内生产总值[i-1] 创建图表2年，gdps } } 功能创建年份，gdps{ 新建Chartdocument.getElementByIdline-chart{ 键入：“行”， 数据：{ 标签：年， 数据集：[{ 数据：GDP， 标签：美国GDP， 填充：假， 背景颜色：“蓝色”， 边框颜色：“蓝色”， pointBorderColor:'蓝色'， 点半径：1， } ] }, 选项：{ 标题：{ 显示：假， 正文：“1969-2019年美国GDP数据”， }, 动画：错， 图例：{display:true}， MaintaintAspectRatio:false， 回答：是的， responsiveAnimationDuration:0， 比例：{ 雅克斯：[{ 滴答声：{ 贝吉纳泽罗：是的， 回调：函数值、索引、值{ ifparseIntvalue>=1000{ 返回“$”+value.toString.replace/\B？=\d{3}+？！\d/g，； }否则{ 返回“$”+值； } } } }] } } }; } 功能创建图表2年，gdps{ 新建Chartdocument.getElementByIdline-chart2{ 类型：'bar'， 数据：{ 标签：年， 数据集：[{ 数据：GDP， //标签：美国GDP， 填充：假， 背景颜色：“蓝色”， 边框颜色：“蓝色”， pointBorderColor:'蓝色'， 点半径：1， } ] }, 选项：{ 标题：{ 显示：假， 正文：“1969-2019年美国GDP数据”， }, 动画：错， 图例：{display:true}， MaintaintAspectRatio:false， 回答：是的， responsiveAnimationDuration:0， 比例：{ 雅克斯：[{ 滴答声：{ 贝吉纳泽罗：是的， 回调：函数值、索引、值{ ifparseIntvalue>=1000{ 返回“$”+value.toString.replace/\B？=\d{3}+？！\d/g，； }否则{ 返回“$”+值； } } } }] } } }; } 更改js window.code值->

---

很好的解决方案。我想在第二张图表上添加第二个y2轴的百分比变化。我将很快发布一些内容，但我会重视您对百分比变化计算的编码……因此您可以使用相同的.map来表示gdp，但您将使用gdp gdps[I-1]/gdps[I-1]*100来代替gdp gdps[I-1]。或者只是gdps_pct=gdps.mapgdp=>gdp/gdps[i-1]*100；