Как отобразить данные переменных для диаграммы p ie (react. js) - PullRequest
Новая
       78

Как отобразить данные переменных для диаграммы p ie (react. js)

0 голосов
/ 19 июня 2020

Я хочу создать диаграмму p ie, используя значение состояния в ответ на'@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     
  }
]

Как я могу реализовать это, как я хочу?

1 Ответ

0 голосов
/ 19 июня 2020

Поскольку this.state.list представляет собой список объектов, вы можете просто использовать метод map для l oop через каждый объект 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
  ]
};
...