javascript - 使用 Chart.js 从世界银行 javascript JSON 下载中获取变化统计数据

Question

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

第二张图表的第一年变化为零，之后的所有内容都是今年值与去年值之间的增量。

document.addEventListener('DOMContentLoaded', () => {
    // console.log("loaded")
    window.countrycode = 'US';
    window.indcode='NY.GDP.PCAP.PP.CD';
    fetchData()
})

function fetchData () {
    fetch('https://api.worldbank.org/v2/country/' + window.countrycode + '/indicator/' + window.indcode + '?format=json&per_page=120')
    .then(resp => resp.json())
    .then(data => {
        let years = data[1].map(year => year.date).reverse()
        let gdps = data[1].map(year => year.value).reverse()       

    createChart(years,gdps)
    
    years2 = years.filter((x,i)=>gdps[i]!==null)
    gdps2 = gdps.filter(x=>x!==null)
    gdps3 = gdps2.map((gdp,i)=> (
      (typeof gdp !== 'number' || typeof gdps2[i-1] !== 'number') ? 0 :
      gdp-gdps2[i-1]
    ))
    gdps4 = gdps2.map((gdp2,i2)=> (
      (typeof gdp2 !== 'number' || typeof gdps2[i2-1] !== 'number') ? 0 :
      (gdp2-gdps2[i2-1])/gdps2[i2-1]*100
    ))
    // console.log('Years:',years,'gdps:', gdps,'gdps2:', gdps2, 'gdps3:', gdps3, 'gdps4:', gdps4)
    createChart2(years2,gdps4)
    })  

}

function createChart(years,gdps){
    new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
          labels: years,
          datasets: [{ 
              data: gdps,
              label: "USA GDP",
              fill: false,
              backgroundColor: 'blue',
              borderColor: 'blue',
              pointBorderColor: 'blue',
              pointRadius: 1,
            }   
          ]
        },
        options: {
          title: {
            display: false,
            text: 'USA GDP Data 1969 - 2019',
          },
          animation: false,
          legend: {display: true},
          maintainAspectRatio: false,
          responsive: true,
          responsiveAnimationDuration: 0,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                callback: function(value, index, values) {
                  if(parseInt(value) >= 1000){
                    return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                    return '$' + value;
                  }
                }
              }
            }]
          }
        }
      });
}
function createChart2(years2,gdps4){
  new Chart(document.getElementById("line-chart2"), {
      type: 'bar',
      data: {
        labels: years2,
        datasets: [{ 
            data: gdps4,
            // label: "USA GDP",
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            pointBorderColor: 'blue',
            pointRadius: 1,
          }   
        ]
      },
      options: {
        title: {
          display: false,
          text: 'USA GDP Data 1969 - 2019',
        },
        animation: false,
        legend: {display: true},
        maintainAspectRatio: false,
        responsive: true,
        responsiveAnimationDuration: 0,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              callback: function(value, index, values) {
                    return value + '%';
              }
            }
          }]
        }
      }
    });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">

<canvas id="line-chart" width="100%" height="250"></canvas>
 <canvas id="line-chart2" width="100%" height="145"></canvas>
 <!--<button type="button">Change js window.code values</button>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> 

Answer 1

只是一个简单的映射，用于将每个值与前一个值相减。检查以确保值是数字，如果不是，则返回 0。

我添加了 null gdps 的过滤器，因此那些年份不会显示在图表中。请注意，如果中间有“漏洞”，它将仅使用最后一年可用的数据。

document.addEventListener('DOMContentLoaded', () => {
    // console.log("loaded")
    window.countrycode = 'US';
    window.indcode='NY.GDP.PCAP.PP.CD';
    fetchData()
})

function fetchData () {
    fetch('https://api.worldbank.org/v2/country/' + window.countrycode + '/indicator/' + window.indcode + '?format=json&per_page=120')
    .then(resp => resp.json())
    .then(data => {
        let years = data[1].map(year => year.date).reverse()
        let gdps = data[1].map(year => year.value).reverse()
        
        years = years.filter((x,i)=>gdps[i]!==null)
        gdps = gdps.filter(x=>x!==null)

        createChart(years,gdps)
        
        gdps = gdps.map((gdp,i)=> (
          (typeof gdp !== 'number' || typeof gdps[i-1] !== 'number') ? 0 :
          gdp-gdps[i-1]
        ))
        createChart2(years,gdps)
    })  

}

function createChart(years,gdps){
    new Chart(document.getElementById("line-chart"), {
        type: 'line',
        data: {
          labels: years,
          datasets: [{ 
              data: gdps,
              label: "USA GDP",
              fill: false,
              backgroundColor: 'blue',
              borderColor: 'blue',
              pointBorderColor: 'blue',
              pointRadius: 1,
            }   
          ]
        },
        options: {
          title: {
            display: false,
            text: 'USA GDP Data 1969 - 2019',
          },
          animation: false,
          legend: {display: true},
          maintainAspectRatio: false,
          responsive: true,
          responsiveAnimationDuration: 0,
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true,
                callback: function(value, index, values) {
                  if(parseInt(value) >= 1000){
                    return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                    return '$' + value;
                  }
                }
              }
            }]
          }
        }
      });
}
function createChart2(years,gdps){
  new Chart(document.getElementById("line-chart2"), {
      type: 'bar',
      data: {
        labels: years,
        datasets: [{ 
            data: gdps,
            // label: "USA GDP",
            fill: false,
            backgroundColor: 'blue',
            borderColor: 'blue',
            pointBorderColor: 'blue',
            pointRadius: 1,
          }   
        ]
      },
      options: {
        title: {
          display: false,
          text: 'USA GDP Data 1969 - 2019',
        },
        animation: false,
        legend: {display: true},
        maintainAspectRatio: false,
        responsive: true,
        responsiveAnimationDuration: 0,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
              callback: function(value, index, values) {
                if(parseInt(value) >= 1000){
                  return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                } else {
                  return '$' + value;
                }
              }
            }
          }]
        }
      }
    });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">

<canvas id="line-chart" width="100%" height="250"></canvas>
 <canvas id="line-chart2" width="100%" height="145"></canvas>
 <!--<button type="button">Change js window.code values</button>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>