React js和chart js饼图类型答案

【问题标题】：React js and chart js pie chart typeReact js和chart js饼图类型
【发布时间】：2020-07-14 13:05:27
【问题描述】：

大家好，我需要一个动态图表js pie类型，

这是获取数据的请求：

 async componentDidMount(){
    axios.get("http://localhost:8080/requete/tab1")
    .then(response => response.data)
    .then((data) =>{
      this.setState({dataL : data})

})

}

这是带有静态数据的代码：

 const options = {
        animationEnabled: true,
        exportEnabled: true,
        theme: "light1", 
        title:{
          text: "Trip Expenses"
        },
        data: [{
          type: "pie",
          indexLabel: "{label}: {y}%",      
          startAngle: -90,
          dataPoints: [
            
            

            

            
            { y: 5, label: "Lost" },
            { y: 24, label: "Won" },
           
           ]
        }]
      }

请问我应该怎么做才能在我的图表上获得动态值

【问题讨论】：

标签： reactjs charts chart.js pie-chart

【解决方案1】：

尝试使用 react-apexcharts。这使您可以根据需要创建动态图表

【讨论】：

【解决方案2】：

您应该使用 chart.js 饼创建新组件并定义 props。从后端接收数据后，您将导入此组件并将此数据发送为props。

<Pie {...this.state.data} />

props: {
   data: Array,
   ....
}

computed() {
   pie() {
      return this.data || [];
   }
}

【讨论】：