如何為餅圖映射變量數據（react.js）

Question

我想使用 state 值與“@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

文檔中的內容是如何制作具有固定數字的圖表，但我想使用 state 進行更改。

那么，如何映射這樣的系列數據以及如何靈活地添加數據長度？

我有 object 之類的列表...

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     
  }
]

我怎樣才能實現它？

Answer 1

Since this.state.list is a list of objects, so you can simply use map method to loop through each object https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/地圖。 然后使用自定義值創建新的 object。

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
  ]
};