Javascript 如何在堆叠条形图中显示json api数据值？

嘿，我试图在堆叠条形图中实现json API数据值，但我不知道怎么做这里是json API和它的外观

{"topology": [
{
"label": "living_street",
"value": 0.010549953326361517
},
{
"label": "tertiary",
"value": 0.767246375468044
},
{
"label": "primary",
"value": 0.21522791175081937
},
{
"label": "service",
"value": 0.006975759454774865
}
]

}

以下是我到目前为止在代码中所做的

`fetchData() {
    fetch(`http://www.mocky.io/v2/5e96ff763000006500b6da20`)
      .then(response => response.json())
      .then(dat => {
        const dat1 = dat.map(c => {
          return c.label;
        });
        const dat2 = dat.map(c => {
          return c.value;
        });
        const newXaxis = dat1;
        const newSeries = [];
        newSeries.push({
          data: dat2,
          name: this.state.series.labels
        });
        this.setState({
          series: newSeries,
          options: {
            ...this.state.options,
            labels: newXaxis,
            xaxis: { ...this.state.options.xaxis, categories: newXaxis }
          }
        });
      });
  }

  componentDidMount() {
    this.fetchData();
  }`

...

 return (

        <Chart
          options={this.state.options}
          series={newSeries}
          type="bar"
          height="150px"
        />
}

`fetchData（）{
取回(`http://www.mocky.io/v2/5e96ff763000006500b6da20`)
.then（response=>response.json（））
。然后（dat=>{
常数dat1=dat.map（c=>{
返回c.标签；
});
常数dat2=dat.map（c=>{
返回c.value；
});
常数newXaxis=dat1；
const newSeries=[]；
newSeries.push({
数据：dat2，
名称：this.state.series.labels
});
这是我的国家({
系列：新闻系列，
选项：{
…此.state.options，
标签：newXaxis，
xaxis:{…this.state.options.xaxis，类别：newXaxis}
}
});
});
}
componentDidMount（）{
这是fetchData（）；
}`
...
返回(
}

但它并没有显示在堆叠图中，而是这样显示的

我希望结果是这样的

---

您可以使用选项中的stacked参数执行此操作：

scales: {
    xAxes: [{
        stacked: true,
    }],
    yAxes: [{
        stacked: true
    }]
}

---

您能够将获取的数据传递到图表中吗？我在

React

应用程序中使用

Apexcharts

和

Axios

时遇到了一些问题

这是我的密码：

    let url = 'http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';


class Bar extends Component {

    constructor(props) {
        super(props);
        this.state = {
            options: {
                chart: {
                    height: 450,
                    type: 'bar',
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                    }
                },
                dataLabels: {
                    enabled: true
                },
                xaxis: {
                    type: 'datetime',
                    min: new Date('01 Mar 2012').getTime(),
                    tickAmount: 6,
                },
                series: [{
                    data: []
                }
                ],
                title: {
                    text: 'AMR Consumption',
                },
                noData: {
                    text: 'No Data'
                }
            }
        }
    }


    componentDidMount() {
        axios.get(url)
            .then(res => {
                const series = res.data;
                // this.state.options.series.push
                // console.log('SERIES ARRAY: ' + res.data);

                const myArray = [];
                myArray.push(series);

                console.log(myArray);

                // this.setState({
                //     data: myArray
                // })


                for (let i = 0; i < myArray.length; i++) {
                    this.setState({
                        options: {
                            ...this.state.options,
                            series: {
                                ...this.state.options.series,
                                data: myArray[i]
                            }
                        }
                        // series: myArray[i]
                    })
                }

                console.log("CHART SERIES: " + JSON.stringify(this.state.options.series.data));


            })

    }

    render() {

        return (
            <div className="container">
                <Chart options={this.state.options} series={this.state.options.series} type="bar" width="500" />
            </div>
        );
    }

}

export default Bar;

let url='1〕http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly';
类栏扩展组件{
建造师（道具）{
超级（道具）；
此.state={
选项：{
图表：{
身高：450，
类型：'bar'，
},
打印选项：{
酒吧：{
对,，
}
},
数据标签：{
已启用：true
},
xaxis：{
键入：“日期时间”，
最小值：新日期（'2012年3月1日'）。getTime（），
金额：6，
},
系列：[{
数据：[]
}
],
标题：{
文本：“AMR消费”，
},
野田：{
文本：“无数据”
}
}
}
}
componentDidMount（）{
获取（url）
。然后（res=>{
常数系列=分辨率数据；
//this.state.options.series.push
//console.log（'系列数组：'+res.data）；
常量myArray=[]；
myArray.push（系列）；
log（myArray）；
//这是我的国家({
//数据：myArray
// })
for（设i=0；i

错误：引发了跨源错误。React无权访问开发中的实际错误对象。有关详细信息，请参阅（…）