React js和chart js餅圖類型

Question

大家好，我需要一個動態圖表js pie類型，

這是獲取數據的請求：

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

})

}

這是帶有 static 數據的代碼：

 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" },
           
           ]
        }]
      }

請問我應該怎么做才能在我的圖表上獲得動態值

Answer 1

嘗試使用 react-apexcharts。 這使您可以根據需要創建動態圖表

Answer 2

您應該使用 chart.js 餅圖制作新組件並定義props 。 從后端接收數據后，您將導入此組件並將此數據作為props發送。

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

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

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