如何为饼图映射变量数据（react.js）答案

【问题标题】：How to mapping variable data for pie chart (react.js)如何为饼图映射变量数据（react.js）
【发布时间】：2020-06-18 22:28:29
【问题描述】：

我想使用状态值与“@toast-ui/react-chart”做出反应来制作饼图。

在查看示例后，我尝试了这个和那个，但对我来说很难。

这是一个例子。

//chart data
var data = {
  categories: ['June, 2015'],
  series: [
      {
          name: 'Budget',
          data: [5000]
      },
      {
          name: 'Income',
          data: [8000]
      },
      {
          name: 'Expenses',
          data: [4000]
      },
      {
          name: 'Debt',
          data: [6000]
      }
  ]
};
var options = {
  chart: {
      width: 660,
      height: 560,
      title: 'Today's Channel & Value.'
    }
    tooltip: {
      suffix: 'value'
    }
  },
};
var theme = {
  series: {
      colors: [
          '#83b14e', '#458a3f', '#295ba0', '#2a4175', '#289399',
          '#289399', '#617178', '#8a9a9a', '#516f7d', '#dddddd'
      ]
  }
};

//render part
render()
{
return(
       <div>
        <PieChart
          data={data} 
          options={options} 
        />
       </div>
}

文件在这里。

https://github.com/nhn/toast-ui.react-chart#props https://nhn.github.io/tui.chart/latest/tutorial-example07-01-pie-chart-basic

文档里面是如何制作一个固定数字的图表，但是我想用状态来改变它。

那么，我怎样才能像这样映射系列数据以及如何灵活地添加数据长度？

我有类似...的对象列表

this.state.list =[{"channel_name":"A","channel_number":17,"VALUE":3,"num":1},
{"channel_name":"B","channel_number":23,"VALUE":1,"num":2},
{"channel_name":"C","channel_number":20,"VALUE":1,"num":3},
{"channel_name":"D","channel_number":1,"VALUE":1,"num":4}]

列表的长度在 1 到 7 之间，具体取决于查询的结果。

我想这样做。

series:[
  {
       name: this.state.list[0].channel_name+this.state.list[0].channel_num
       data: this.state.list[0].VALUE     
  },
 {
       name: this.state.list[1].channel_name+this.state.list[1].channel_num
       data: this.state.list[1].VALUE     
  },
 {
       name: this.state.list[2].channel_name+this.state.list[2].channel_num
       data: this.state.list[2].VALUE     
  },
 {
       name: this.state.list[3].channel_name+this.state.list[3].channel_num
       data: this.state.list[3].VALUE     
  }
]

如何实现我想要的？

【问题讨论】：

标签： reactjs chart.js pie-chart

【解决方案1】：

由于this.state.list是一个对象列表，所以你可以简单地使用map方法循环遍历每个对象https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map。然后创建具有自定义值的新对象。

let new_series = [];
this.state.list.map((obj) => {
    let info = {
        name: obj.channel_name + obj.channel_number, //from your code
        data: obj.VALUE //from your code
    }
    new_series.push(info)
});

然后将新列表分配给您的图表。

//chart data
var data = {
  categories: ['June, 2015'],
  series: new_series
  ]
};

【讨论】：