如何使用axios从servlet中获取数据然后交叉过滤并通过highcharts显示

Question

我正在尝试使用我的 servlet 中的数据通过 highcharts 显示图表，但不知何故它无法正确显示我的 servlet 中的数据（就像它在控制台中的显示一样，但在那之后我认为我缺少了几个步骤）。我完全不熟悉 React js 和这个 web 开发的东西，请帮忙，我认为它与 axios 有关，

import React from 'react';
import SearchPanel from '../components/SearchPanel'
import { Grid } from '@material-ui/core';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import crossfilter from 'crossfilter2';
import axios from 'axios';
import App1 from '../components/App1';



export default class AnalyticsSection extends React.Component {
  
  state = {
    dataResults: [],
    data : [],
  };

  
  
  componentDidMount() {
    axios.get('http://localhost:8080/Internship_Backend/customer')
     .then(response => {
       console.log(response);
       this.setState({ dataResults : response.data });
     })
     .catch(error => {
       console.log(error);
     });
    
     var dataset = crossfilter(this.state.dataResults);
   
     var bcodedim = dataset.dimension(d => d.business_code);
     var bcodegrp = bcodedim.group().reduceSum(d => d.actualOpenAmount);

     function prepareDataForHighcharts(groups){
      var categories =[];
      var data = [];
      var gdata = groups.top(4);
      gdata.forEach(d => {
          categories.push(d.key);
          data.push(d.value);

      });
      return{
          categories : categories,
          data : data
      }
  }

  var tempObject = prepareDataForHighcharts(bcodegrp);
  var options = {
    chart: {
        renderTo : 'container',
        type : 'bar',
        backgroundColor:'#1b1f38',
        minWidth: 275,
        height: '222px',
       
        
    },
    // colors: ['#FFFFFFa5 '],

    title : {
        text : "Total Amount by Company Code",
        style:{
            color: '#FFFFFFa5'
        }

    },
    xAxis : {
       
        type : 'category',
        categories : tempObject.categories,
        title: {
          text: null
      },
      overflow : 'auto'
        
    },
    yAxis : {
      min: 0,
      // overflow : 'scroll'
      // tickInterval: 10000,
    },
    tooltip: {
      valueSuffix: ' dollars'
    },
    series : [{
        // name : 'Count',
        data : tempObject.data,
        // data: [125, 100,85, 74, ]
    }],
    legend : {
      enabled : false,
    },
    credits: {
       enabled : false,
      },
    exporting: {
       enabled : false,
         },
        
     plotOptions: {
       
      }
    }
    

var chart = new Highcharts.chart(options);


}  
 

  

  render (){
    

  return (
       <Grid container  >
          
          <Grid item xs style={{
              minWidth: 275,
              height: '225px',
              margin: '2px 2px 10px ',
              backgroundColor: "rgb(93,175,240,0.5)",
              marginTop:'-10px',
              marginLeft : '12px',
              marginRight : '-5px'
           
           }} >
             <div id = 'container' align='center' style = {{ marginTop : '2px' }}> </div>
           </Grid>
        
        <Grid item xs style = {{
          minWidth: 275,
          height: '225px',
          margin: '2px 2px 10px ',
          backgroundColor: "rgb(93,175,240,0.5)",
          marginTop:'0px',
          marginLeft : '12px',
          marginRight : '-5px'
           }} >
             <SearchPanel/>
            < div align='center'>
              
              </div>
        </Grid>


        </Grid>
   
      
    
  );
}
}

我的 servlet 中的数据采用 json 格式

Answer 1

我会在 then 回调中进一步处理数据，然后将结果存储在状态中。

const url = (() => {
  const data = [{"pk_id":1,"acct_doc_header_id":539592086,"company_id":60,"document_number":39439082,"document_number_norm":39439082,"business_code":"pier9","create_year":"","document_line_number":0,"doctype":"RI","customer_number":218994,"customer_number_norm":218994,"fk_customer_map_id":-1,"customer_name":"pied piper","division":"","documentCreateDate":"Jul 5, 2018","documentCreateDateNorm":"Jul 5, 2018","posting_id":"","invoice_id":39439082,"invoice_id_norm":39439082,"totalOpenAmount":0.0,"totalOpenAmountNorm":0.0,"cust_payment_terms":60,"business_area":"","ship_to":"","clearingDate":"Sep 5, 2018","clearingDateNorm":"Sep 5, 2018","reason_code":"","isOpen":0,"debit_credit_indicator":"","payment_method":"","invoiceAmountDocCurrency":3925.91,"document_id":539592086,"actualOpenAmount":3925.91,"paidAmount":3925.91,"dayspast_due":2,"invoice_age":62,"disputed_amount":0.0}]
  const blob = new Blob([JSON.stringify(data)], {
    type: 'application/json'
  })
  return URL.createObjectURL(blob);
})()

const options = ({data, categories}) => ({
  chart: {
      type : 'bar',
      backgroundColor:'#1b1f38',
      minWidth: 275,
      height: '222px',              
  },
  title : {
      text : "Total Amount by Company Code",
      style:{
          color: '#FFFFFFa5'
      }
  },
  xAxis : {
      type : 'category',
      categories,
      title: {
        text: null
    },
    overflow : 'auto'

  },
  yAxis : {
    min: 0,
  },
  tooltip: {
    valueSuffix: ' dollars'
  },
  series : [{
      data
  }],
  legend : {
    enabled : false,
  },
  credits: {
     enabled : false,
    },
  exporting: {
    enabled : false,
  },
  plotOptions: {}
})

const prepareDataForHighcharts = (groups) => {
  const categories = [];
  const data = [];
  const gdata = groups.top(4);
  for(const {key, value} of gdata) {
    categories.push(key);
    data.push(value);
  }
  
  return {
    categories,
    data
  }
}

const ReactHighcharts = ReactHighcharts;
const { Component, useState, useEffect } = React;

class AnalyticsSection extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataResults: [],
      config: {}
    }
  }

  componentDidMount() {
    this.mounted = true;
    
    axios.get(url)
        .then(response => {
          const dataResults = response.data;
         
          if(!this.mounted) {
            return;
          }
          
          const dataset = crossfilter(dataResults);
          const bcodedim = dataset
            .dimension(({business_code}) => business_code);
          const bcodegrp = bcodedim.group()
            .reduceSum(({actualOpenAmount}) => actualOpenAmount);
          const obj = prepareDataForHighcharts(bcodegrp);
          const config = options(obj);
          
          this.setState(state => ({
            isLoading: false,
            config
          }));
      })
      .catch(error => {
        console.log(error);
      });
  }
  
  componentWillUnmount() {
    this.mounted = false;
  }
  
  render() {
    const { isLoading, config } = this.state;
  
    return <div>
    {isLoading ? <div>Loading</div> : <ReactHighcharts config = {config}></ReactHighcharts>}
  </div>
  }
  
}

ReactDOM.render(
    <AnalyticsSection />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://unpkg.com/react-highcharts@16.0.2/bundle/ReactHighcharts.js"></script>
<script src="https://unpkg.com/crossfilter2@latest/crossfilter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.js"></script>
<div id="root"></div>

如何使用axios从servlet中获取数据然后交叉过滤并通过highcharts显示

How to use axios to fetch data from servlet and then crossfilter it and display via highcharts

javascript

highcharts

crossfilter

reactjs

axios