如何在堆积条形图中显示 json api 数据值？答案

【问题标题】：How to Display json api data value in stacked bar chart?如何在堆积条形图中显示 json api 数据值？
【发布时间】：2020-04-15 12:49:40
【问题描述】：

嘿，我正在尝试在堆积条形图中实现 json API 数据值，但我不知道该怎么做，这里是 json api http://www.mocky.io/v2/5e96ff763000006500b6da20，它看起来像

{"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"
        />
}

但它没有显示在堆叠图表中是这样显示的

我希望结果看起来像这样。

【问题讨论】：

标签： javascript reactjs charts apexcharts

【解决方案1】：

您是否能够将获取的数据传递给图表？在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;

错误：引发了跨域错误。 React 无法访问开发中的实际错误对象。请参阅 (...) 了解更多信息。

【讨论】：

【解决方案2】：

您可以使用选项中的堆叠参数来做到这一点：

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

【讨论】：