GoogleBar диаграммы заполняют данные из функции карты (ключ, элемент)?

Question

Я пытаюсь заполнить данные в виде столбчатой ​​диаграммы из словаря: у меня есть:

this.props.data.map(function(item, key){
 {item.name}, {item.detail}, {item.number}

})}

и код для диаграммы Google:

     <Chart width={'500px'}
              height={'300px'}
              chartType="BarChart"
              loader={<div>Loading Chart</div>}
        data={[
          [ 'Element', 'Density', { role: 'style' },
          {
            sourceColumn: 0,
            role: 'annotation',
            type: 'string',
            calc: 'stringify',
          },],
            ['Copper',  8.94, '#b87333', null],
            ['Silver', 10.49, 'silver', null],
            ['Gold', 19.3, 'gold', null],
            ['Platinum', 21.45, 'color: #e5e4e2', null],
        ]}
  options={{
    title: 'Usage by Platform for Last 30 Days',
    width: 600,
    height: 400,
    bar: { groupWidth: '95%' },
    legend: { position: 'none' },
  }}

как я могу получить данные из реквизита и заполнить символ, предметы dict могут увеличиваться / уменьшаться.цвет может быть статичным.Я пытался так:

 data={this.props.data.map(function(item, key){
                [
                  ['Element', 'Density', {role: 'style'},
                    {sourceColumn: 0, role: 'annotation',
                     type: 'string', calc: 'stringify'
                    }
                  ],
                  [item.name, item.number, '#b87333', null]
                ]
            })

, но не работает