Как отобразить значение json API в гистограмме с накоплением?

Question

Эй, я пытаюсь реализовать 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"
        />
}

, но на диаграмме с накоплением это не показывалось, это показывает

И я хочу, чтобы этот результат выглядел следующим образом.

Answer 1

Удалось ли вам передать полученные данные на график? У меня были некоторые проблемы с этим при использовании Apexcharts и Axios в приложении React.

Вот мой код:

    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;

Ошибка: A возникла перекрестная ошибка. У React нет доступа к фактическому объекту ошибки в разработке. Смотрите (...) для получения дополнительной информации.

Answer 2

Вы можете сделать это с параметром stacked в ваших опциях:

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