Highcharts堆叠柱形图Javascript

我是海图新手，我正在尝试实现一个基本的堆叠柱形图，如图中所示 我的代码如下所示

import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { workForceDataFemale } from "./WorkForceDataFemale";
import { workForceDataMale } from './WorkForceDataMale';



const options = {

  chart: {
    type: 'column'
  },
  title: {
    text: 'My chart'
  },
  xAxis: {
   categories: ['2013']
  },
  yAxis: {
    title: {
      text: 'Total Number of Workers'
    },
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Male',
    data: [ workForceDataMale[2013].map(e => (e.n_workers))]
  }, {
    name: 'Female',
    data: [ workForceDataFemale[2013].map(e => (e.n_workers)) ]
  }   
  ],

};

class App extends Component {


  render() {
    return (
      <div className="App">
        <div className="main-container">
        <HighchartsReact highcharts={Highcharts} options={options} />
        </div>
      </div>
    );
  }

}

export default App;

从“Highcharts”导入Highcharts；
从“highcharts react official”导入highcharts react；
从“/workForceDataFemale”导入{workForceDataFemale}；
从“/workForceDataMale”导入{workForceDataMale}；
常量选项={
图表：{
类型：“列”
},
标题：{
文本：“我的图表”
},
xAxis：{
类别：['2013']
},
亚克斯：{
标题：{
文本：“工人总数”
},
},
打印选项：{
专栏：{
堆叠：“正常”，
数据标签：{
已启用：true
}
}
},
系列：[{
姓名：'男'，
数据：[workForceDataMale[2013]。地图（e=>（e.n_工人））]
}, {
姓名：'女'，
数据：[workForceDataFemale[2013]。地图（e=>（e.n_工人））]
}   
],
};
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

---

我不确定我的xAxis到底发生了什么，但我希望能够插入'2013'年，这样我的列就可以堆叠起来。

Hi，你正在循环一个数组，并将其中的每个元素返回到图表数据：

data:[workForceDataMale[2013]。map（e=>（e.n_workers））]

，看起来你的

workForceDataMale[2013]

数组实际上有很多数据。为了获得你想要可视化的图表，你需要一个数组，其中男性系列只有一个值，而女性系列只有一个值。嗨，是的，我最终发现了，还必须从数据中删除[]才能正确呈现Hi@invrt，你的问题解决了吗，或者你还需要帮助吗？