javascript - 如何从json中提取数据并将其注入(inject)到图表中？

Question

我正在制作一个条形图组件，并将其导入到我的 app.js 中。我的 JSON 数据包含板球比赛信息，即 season 和 runs(即该赛季的得分)。 Y 轴上的条形高度将是特定季节中所有运行的总和，X 轴上的标签将是季节。

对于下面的 JSON 示例:

season 2008 -> runs = 100+200=300
season 2009 -> runs = 300
season 2010 -> runs = 1100
season 2011 -> runs = 100

JSON 数据:

[
    { 
      "season":2008,
      "runs":100
    },
    { 
      "season":2008,
      "runs":200
    },
    { 
      "season":2009,
      "runs":300
    },
    { 
      "season":2010,
      "runs":600
    },
    { 
      "season":2010,
      "runs":500
    },
    { 
      "season":2011,
      "runs":100
    }   
]

图表组件:

import React, { Component } from 'react';
import ChartistGraph from 'react-chartist';

const ChartData = {

  //labels are the season

  labels: [ ],

  series: [
    // runs will be injected here
  ],
   distributeSeries: true
}

const options = {
    width: 720,
    height: 400
}

class Chart extends Component {

  render(){
    return(
      <div>
         <ChartistGraph data={ChartData} type={'Bar'} options={options}/>
      </div>
    )}

}

export default Chart;

如何将 JSON 数据中的数据硬编码为 season 作为 labels 并将 runs 作为 series 注入(inject)。我尝试使用 for 循环，但无法获得特定季节的运行总和。例如:对于season 2008，它应该是100+200=300，即label=2008，与其对应的系列元素将为300。

注意:对于给定的 JSON 数据系列将是:

系列:[300, 300, 1100, 100]

Answer 1

使用数组reduce来组合季节，并使用另一个reduce来创建两个数组

var json = `[
    { 
      "season":2008,
      "runs":100
    },
    { 
      "season":2008,
      "runs":200
    },
    { 
      "season":2009,
      "runs":300
    },
    { 
      "season":2010,
      "runs":600
    },
    { 
      "season":2010,
      "runs":500
    },
    { 
      "season":2011,
      "runs":100
    }   
]`

var data = Object.entries(JSON.parse(json).reduce((acc, {season, runs}) => (acc[season] = (acc[season] || 0) + runs, acc), {}))
    .reduce((acc, [labels, series]) => (acc.labels.push(labels), acc.series.push(series), acc),{labels: [], series:[]}) 
    console.log(data)

在 ES5 中逐步分解

var json = `[
    { 
      "season":2008,
      "runs":100
    },
    { 
      "season":2008,
      "runs":200
    },
    { 
      "season":2009,
      "runs":300
    },
    { 
      "season":2010,
      "runs":600
    },
    { 
      "season":2010,
      "runs":500
    },
    { 
      "season":2011,
      "runs":100
    }   
]`
var data = JSON.parse(json); // because JSON is a string representation of an javascript object
var data1 = data.reduce(function (acc, item) {
    var season = item.season,
        runs = item.runs;
    acc[season] = acc[season] || 0; // add a season as a key
    acc[season] += runs; // add runs
    return acc;
}, {});
console.log(data1); 
var data2 = Object.entries(data1); // make an array of [[label, runs],[label, runs]...]
console.log(data2); 
var data3 = data2.reduce(function (acc, item) { // each item is an array of [year, total runs]
    var labels = item[0],
        series = item[1];

    acc.labels.push(labels);
    acc.series.push(series); 
    return acc;
}, { labels: [], series: [] }); // initialise the return object
console.log(data3);